본문 바로가기
개발/React, NextJs

Next.js 13 업데이트 알아보기

by 쓱싹디벨로퍼 2024. 3. 19.

Next.js13 버전의 주요 업데이트 내용에 대해서 알아보자

 

App Router

  • 기존에 pages/ 디렉터리에서 라우팅 되던 방식과 다르게, app/ 디렉터리로 라우팅 하는 방식이 추가됨
  • app/ 디렉토리를 생성하여 라우팅을 설정할 수 있으며, 라우팅 환경 개선뿐만 아니라, 레이아웃, 서버 컴포넌트, 스트리밍, 데이터 패칭까지도 지원하는 형태로 향상
  • app/ 폴더로 기존 파일 시스템 라우팅을 구현할 수 있으며, 여기의 page.js가 해당 경로(라우팅)의 페이지 컴포넌트가 됨
  • pages/ 라우팅과 함께 사용 가능 (점진적 업데이트)

<Pages Router 방식>

// pages/index.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

 

<App Router 방식>

// app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Layout

  • app 파일 시스템을 통해서 기본 레이아웃을 정의할 수 있음
  • 공통적인 레이아웃 UI를 children을 감싸는 컴포넌트 형태로 제공. 이를 통해 공통 레이아웃의 상태를 유지하고, 불필요한 리렌더링을 방지할 수 있으며, 컴포넌트 간 상호작용 향상
  • 폴더 경로 안에 layout.js 컴포넌트를 추가하면 공통 레이아웃 적용 가능
    // app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return <section>{children}</section>
}​


  • app 디렉토리 루트에 있는 RootLayout은 필수이며, 그 하위에 있는 폴더에서는 커스텀 레이아웃을 만들 수 있음. 이때, 위 사진처럼 상위 레이아웃이 하위 레이아웃을 감싸는 구조
    // app/layout.js (필수)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}​

React Server Component

  • app directory 내부에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작함
    • 서버 컴포넌트는 복잡한 인터페이스를 구축하는 동시에 클라이언트로 전송되는 JavaScript의 양을 줄여, 초기 페이지 로드 속도를 높일 수 있음
    • 또한, 경로(route)가 로드될 때, Next.js 및 React 런타임이 로드되어 캐시가 가능하고 크기를 예측할 수 있음
    • 서버 컴포넌트 vs 클라이언트 컴포넌트: 컴포넌트가 렌더링 되는 장소가 서버인지 클라이언트인지의 차이. 서버 컴포넌트는 서버에서 한 번 해석된 후 클라이언트로 전달됨
  • 클라이언트 컴포넌트: 만약 app directory 내부에서 클라이언트 컴포넌트를 사용하고 싶다면 파일 최상단에 “use client”를 최상단에 추가해주어야 한다.
    • useState, useEffect 훅을 사용하는 경우
    • 특정 브라우저 API에 의존성이 있는 경우
    • 특정 Event Listeners를 추가하는 경우
    "use client";
 
import { useState } from "react";
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked the Count++ button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Count++</button>
    </div>
  );
}

Streaming

  • app/ 디렉터리는 UI의 렌더링 단위를 점진적으로 렌더링 하고 렌더링 된 단위를 클라이언트로 부분적으로 스트리밍 할 수 있는 기능을 제공
    • 스트리밍: SSR로 렌더링을 하면 블로킹이 될 수 있음. 이를 개선하기 위해 스트리밍으로 페이지의 HTML을 작은 청크로 분할하고, 서버에서 클라이언트로 점진적으로 청크를 전송할 수 있음. 이를 통해 UI를 렌더링 하기 전에 모든 데이터를 기다릴 필요 없이 페이지의 일부를 더 빨리 표시할 수 있음
     
  • 또한 app 디렉터리에서 , loading.js 파일을 만들어서 스트리밍 형태의 로딩 UI를 생성할 수 있음. loading.js 파일을 생성하면 React Suspense를 자동으로 래핑 하여 로딩 화면을 보여주고, 라우트 세그먼트의 내용을 로드하는 동안 서버에서 즉시 로딩 상태를 표시하고, 렌더링이 완료되면 자동으로 새로운 콘텐츠로 교체됨
    /* app/dashboard/loading.tsx */

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />;
}​
  • 같은 폴더에서 loading.js는 layout.js 안에 중첩됨. <Suspense> 경계에서 page.js 파일과 그 아래의 모든 자식을 자동으로 래핑함

 

Data Fetching

  • 이전 Next.js에서는 데이터를 fetching 해 올 때, getServerSideProps나 getStaticProps를 통해 데이터를 가져왔지만, Next.js 13부터는 이 문법들을 사용하지 않고 fetch() Web API를 사용할 수 있게 되면서, 이제는 컴포넌트 레벨에서도 SSR의 적용이 가능함
  • React는 fetch() API의 중복제거를 제공하며, Next.js는 캐싱과 재요청 처리까지 지원하려고 함.
  • 이를 통해, 기존의 SSG, SSR, ISR(Incremental Static Regeneration) 등의 기법을 아래와 같은 fetch() 옵션으로 대체 가능
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

아래와 같이 사용하면 됨.

위와 같이 함수를 선언한 뒤에, use() 안에 넣어주기만 하면 된다. 추가적으로, fetch 구문의 URL 뒤에 { cache: '' }를 넣어줄 수 있는데, 안에 무엇이 들어가냐에 따라 기존의 getServerSideProps, getStaticProps와 유사한 기능을 할 수 있다.

 

Turbopack (beta)

Next.js 13에서는 Rust 기반의 JS 번들링 툴인 Turbopack이 포함됨

  • Turbopack은 개발에 필요한 최소한의 어셋만 번들링 해서 시작시간이 매우 빠름
  • Webpack 보다 700배 빠른 업데이트(Rust 기반의 webpack 대체)
  • Vite 보다 10배 빠른 업데이트
  • Webpack 보다 4배 빠른 cold start(Single Page 표현을 위해 로컬에 데이터를 불러오고 HTML 기반으로 로드준비가 된 상태)

New next/Image

  • 기존의 Image 컴포넌트에 좀 더 강력한 기능들을 부가해서, layout 변경 없이 간단히 이미지를 표시하고 파일을 최적화하여 성능을 향상
  • 클라이언트 측에서 더 적은 양의 Javascript 코드를 가짐
  • 더 쉽게 스타일링과 설정이 가능
  • alt 속성을 필수로 제한하여 웹 접근성 향상
  • 웹 플랫폼에 맞게 조정 (사이즈와 화질 등) - 이미지 로드가 느리면 기존 레이아웃이 밀리는 Layout Shift를 방지 (width, height 필수)
  • hydration을 필요로 하지 않는 네이티브 lazy-loading으로 속도 향상
  • (참고) 기존 이미지 컴포넌트는 next/legacy/image로 변경됨

New @next/font (beta)

  • 구글 폰트를 내장한 새로운 폰트 시스템 도입
  • 커스텀 폰트를 포함하여 폰트를 자동으로 최적화
  • 개인 정보 보호 및 성능 향상을 위한 외부 네트워크 요청 제거
  • 모든 폰트 파일에 대한 내장형 자동 자체 호스팅 제공
  • CSS size-adjust 속성을 적용하여 자동으로 레이아웃 이동이 발생하지 않음

내장된 구글 폰트 사용 방법

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

 

커스텀 폰트 사용 방법

import localFont from '@next/font/local';

const myFont = localFont({src:'.my-font-woff2'});

<html className={myFont .className}>

Improved next/link

  • <Link> 컴포넌트에 더 이상 수동으로 <a> 태그를 하위에 추가할 필요가 없어짐
  • <Link>는 이제 기본값으로 <a> 태그를 렌더링 하며, <a> 태그의 Props들을 정상적으로 전달할 수 있음
import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

 

OG Image

Next.js 13에서  동적 소셜카드를 새로 생성하는 라이브러리인 @vercel/og를 도입하였다.

Next.js에서 섬네일 이미지 자동으로 생성하기 참고

 

미들웨어 API

기존의 도입된 미들웨어를 몇 가지 수정하였다고 한다. 우선 request에 대한 header를 더 쉽게 설정할 수 있고,

rewrite나 redirect를 사용할 필요 없이 직접 미들웨어에서 response를 제공할 수도 있게 되었다.

현재 미들웨어에서 response를 제공하려면, next.config.js에 다음과 같은 코드를 추가해주어야만 한다.

// next.config.js
const nextConfig = {
	...
  experimental: {
    allowMiddlewareResponseBody: true
  },
};

 

 

 

 

출처

https://velog.io/@khy226/Next.js-13-업데이트-된-내용-정리-App-라우터-자세히-알아보기

https://velog.io/@hang_kem_0531/Next.js-13이-나와버렸다

 

728x90

'개발 > React, NextJs' 카테고리의 다른 글

Next.js의 App Router와 Pages Router  (0) 2024.03.20
package.json 에 대해 파해쳐보자  (1) 2024.03.08
React classnames 모듈 사용하기  (0) 2024.03.08

관련글

티스토리툴바