Next.js 13 업데이트(한글)

Next.js 13

Next.js 12를 공부하고 프로젝트를 진행하는 중에 

2022년 10월26일 Next.js Conf에서 Next.js 13을 발표했습니다.

이제 막 알아가던 중인데 벌써 13이 나오니 당황스럽네요..

 

 바로 본론으로 가보겠습니다.

(위 글은 nextjs.org 공식문서를 번역한 글입니다.)

 

Next.js Conf에서 발표한 바와 같이 Next.js 13은 제한 없이 역동적인 기반을 제공합니다.

 

- app/ 디렉토리(베타): 더 쉽고, 더 빠르고, 더 적은 클라이언트 JS.

      -   레이아웃

      -   리액트 서버 컴포넌트

      -   스트리밍

- 터보팩(알파): 최대 700배 빠른 Rust 기반 웹 팩 교체

- 신규 next/image (안정적): 네이티브 브라우저의 느린 로딩으로 고속화.

- 신규 @next/font (베타): 레이아웃 이동이 없는 자동 자체 호스팅 글꼴.

- 개선 next/link:  자동 API를 통한 단순화 <a>.

 

지금 바로 업데이트: 

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

app/ 디렉토리(베타)

Next.js에서 가장 사랑받는 기능 중 하나는 파일 시스템 라우터입니다.

폴더 안에 파일을 놓으면 프로그램에서 즉시 경로를 만들 수 있습니다. 구성이 필요하지 않습니다.

 

오늘, 우리는 app/ 디렉토리(베타)를 도입하여 Next.js의 라우팅 및 레이아웃 경험을 개선하고 있습니다.

이것은 커뮤니티 피드백을 위해 이전에 게시된 Layouts RFC의 결과입니다.

새로운 라우터에는 다음을 지원합니다:

 

   - 레이아웃: 상태를 유지하고 비용이 많이 드는 재렌더링을 피하면서 경로 간에 UI를 쉽게 공유할 수 있습니다.

   - 서버 구성 요소: 가장 동적인 애플리케이션의 경우 서버 우선을 기본값으로 설정합니다.

   - 스트리밍: 렌더링되는 즉시 로드 상태 및 스트림을 UI 단위로 표시합니다.

   - 데이터 가져오기 지원: async 서버 컴포넌트 및 확장 fetch API는 컴포넌트 수준의 가져오기를 지원합니다.

 

Next.js 13으로 업그레이드할 때 app/ 디렉토리를 사용할 필요는 없지만, 

점진적(증분) 채택을 위해 app/ 디렉토리가 기존 페이지 디렉토리와 공존할 수 있습니다.

app/ 디렉토리는 기존 pages/ 디렉토리에서 점진적으로 채택할 수 있습니다.

---

레이아웃

app/ 디렉토리를 사용하면 네비게이션 간에 상태를 유지하고 비용이 많이 드는 재접속을 방지하며 고도의 라우팅 패턴을 활성화하는

복잡한 인터페이스를 쉽게 배치할 수 있습니다.

또한 레이아웃을 중첩하고 구성요소, 테스트 및 스타일과 같은 경로와 애플리케이션 코드를 연결할 수 있습니다.

app/ 디렉토리는 기존 pages/ 디렉토리에서 점진적으로 채택할 수 있습니다.

app/ 내부에 경로를 생성(라우팅) 하려면 page.js 라는 단일 파일이 필요합니다.

 

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

 

그런 다음 파일 시스템을 통해 레이아웃을 정의할 수 있습니다. 

레이아웃은 여러 페이지 간에 UI를 공유합니다. 

탐색 시 레이아웃은 상태를 유지하고 대화형으로 유지되며 다시 렌더링하지 않습니다.

 

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

---

서버구성요소

app/ 디렉토리는 React의 새로운 서버 구성요소 아키텍처를 지원합니다.

서버 및 클라이언트 구성요소는 각각 서버와 클라이언트를 가장 잘 사용하는데, 이를 통해 우수한 개발자 환경을 제공하는

단일 프로그래밍 모델로 빠르고 상호 작용이 뛰어난 앱을 구축할 수 있습니다.

 

서버 컴포넌트를 사용하여 클라이언트에 전송되는 JavaScript의 양을 줄이면서 복잡한 인터페이스를 구축할 수 있는 기반을 마련하여

초기 페이지 로드를 더 빠르게 수행할 수 있습니다.

 

경로가 로드되면 캐시 가능하고 크기를 예측할 수 있는 Next.js 및 React 런타임이 로드됩니다.

이 런타임은 응용프로그램이 커지더라도 크기가 증가하지 않습니다.

또한 런타임은 비동기적으로 로드되어 서버에서 HTML을 클라이언트에서 점진적으로 향상시킬 수 있습니다.

---

스트리밍

app/ 디렉토리는 UI의 렌더링된 단위를 점진적으로 렌더링하고 점진적으로 클라이언트에 스트리밍하는 기능을 도입합니다.

 

Next.js의 서버 구성요소 및 중첩된 레이아웃을 사용하면 데이터가 필요하지 않은 페이지의 일부를 즉시 렌더링하고 데이터를 가져오는

페이지의 일부에 대한 로드 상태를 표시할 수 있습니다.

이 방법을 사용하면 사용자는 페이지 전체가 로드될 때까지 기다릴 필요가 없습니다.

구성 요소, 테스트 및 스타일과 같은 응용 프로그램 코드를 경로와 함께 배치할 수 있습니다.

Vercel에 배포될 때 app/ 디렉토리를 사용하는 Next.js 13 애플리케이션은 기본적으로 Node.js와 Edge 런타임 모두에서 응답을

스트리밍하여 성능을 향상시킵니다.

---

데이터 가져오기

React의 최근 Support for Promise RFC는 데이터를 가져오고 내부 컴포넌트를 처리할 수 있는 강력하고 새로운 방법을 도입했습니다.

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

네이티브 fetch Web API는 React 및 Next.js에서도 확장되었습니다.

자동으로 가져오기 요청을 중복 제거하며 구성 요소 수준에서 데이터를 가져오기, 캐시 및 재검증할 수 있는 유연한 방법을 제공합니다.

이는 정적 사이트 생성(SSG), 서버 측 렌더링(SSR), 증분 정적 재생(ISR)의 모든 이점을 하나의 API를 통해 사용할 수 있습니다.

// 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 } });

app 디렉토리에서 서버의 스트리밍 응답 지원을 포함하여 레이아웃, 페이지 및 구성 요소 내부의 데이터를 가져올 수 있습니다.

 

우리는 로딩 및 오류 상태를 처리하고 UI가 렌더링될 때 스트리밍하는 인체 공학적 방법을 활성화하고 있습니다. 

향후 릴리스에서는 데이터 변형도 개선하고 단순화할 것입니다.

app/ 디렉토리를 사용하면 새로운 특수 파일 loading.js를 사용하여 서스펜스 경계가 있는 인스턴트 로딩 UI를 자동으로 생성할 수 있습니다.

오픈 소스 커뮤니티, 패키지 유지 관리자 및 React 생태계에 기여하는 다른 회사와 협력하여  React 및 Next.js의

새로운 시대를 구축하게 되어 기쁩니다.

컴포넌트 내부에서 데이터를 가져오고 클라이언트에 더 적은 JavaScript를  제공하는 기능은 app/ 디렉토리에

포함시킬 수 있는 두 가지 중요한 커뮤니티 피드백이었습니다.

 

터보팩(알파) 소개

Next.js 13에는 Webpack의 새로운 Rust 기반 후속 제품인 Turbopack이 포함되어 있습니다.

 

웹팩은 30억 번 이상 다운로드 되었습니다.웹 구축에 필수적인 요소이지만, JavaScript 기반 툴링으로 가능한 최대 성능의 한계에

도달했습니다.

 

Next.js 12에서 우리는 네이티브 Rust 기반 도구로의 전환을 시작했습니다.

우리는 Babel에서 다른 곳으로 마이그레이션하는 것으로 시작하여 17배 더 빠른 트랜스파일을 수행했습니다.

그런 다음 Terser를 교체하여 6배 더 빠른 소형화를 실현했습니다. 번들링을 위해 네이티브에 올인할 때입니다.

 

Next.js 13과 함께 Turbopack 알파를 사용하면 다음과 같은 결과가 나타납니다 :

 

   - 웹 팩보다 700배 빠른 업데이트

   - Vite보다 10배 빠른 업데이트

   - 웹 팩보다 콜드 스타트 속도가 4배 빠릅니다.

Turbopack은 Rust 기반 웹팩의 후속 제품으로, 대규모 애플리케이션에 700배 더 빠른 HMR을 제공합니다.

Turbopack은 개발에 필요한 최소한의 자산만 번들로 제공하므로 시작 시간이 매우 빠릅니다.

3,000개의 모듈이 있는 응용 프로그램에서 Turbopack은 부팅하는 데 1.8초가 걸립니다.

Vite는 11.4초, Webpack은 16.5초가 걸립니다.

 

Turbopack은 서버 컴포넌트, TypeScript, JSX, CSS 등을 즉시 지원합니다.

알파테스트 기간 동안 많은 기능이 아직 지원되지 않습니다. 

Turbopack을 사용하여 로컬 반복 속도를 높이는 것에 대한 피드백을 듣고 싶습니다.

 

참고: Next.js의 Turbopack은 현재 next dev만 지원합니다. 지원되는 기능을 봅니다.

우리는 또한 Turbopack을 통해 다음 빌드에 대한 지원을 추가하기 위해 노력하고 있습니다.

 

오늘 Next.js 13에서 Turbopack 알파를 사용해 보십시오. next dev --turbo

 

next/image

Next.js 13은 강력한 새로운 이미지 컴포넌트를 도입하여 레이아웃 변경 없이 이미지를 쉽게 표시하고 필요에 따라 파일을 최적화하여 성능을 향상시킬 수 있습니다.

 

Next.js 커뮤니티 설문조사에서 응답자의 70%는 프로덕션 환경에서 Next.js 이미지 구성요소를 사용했다고 답했으며

개선된 핵심 성능 향상을 보았다고 말했습니다. Next.js 13에서는 next/image를 더욱 개선하고 있습니다.

 

새로운 이미지 컴포넌트:

 

   - 클라이언트 측 JavaScript가 적게 제공됨

   - 스타일링 및 구성이 용이함

   - 기본적으로 alt 태그가 필요한 접근성이 더 높음

   - 웹 플랫폼에 맞게 조정

   - 네이티브의 느린 로딩은 수화 작용이 필요 없기 때문에 더 빠릅니다.

import Image from 'next/image';
import avatar from './lee.png';

function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

---

next/image를 Next.js 13으로 업그레이드

이전 이미지 구성 요소의 이름이 next/legacy/image 로 변경되었습니다.

기존 next/image 사용량을 next/legacy/image로 자동 업데이트하는 코드 모드를 제공했습니다.

예를 들어, 이 명령은 루트에서 실행할 때 ./pages 디렉토리에서 codemod를 실행합니다.

npx @next/codemod next-image-to-legacy-image ./pages

 

@next/font

Next.js 13은 다음과 같은 새로운 글꼴 시스템을 도입합니다 :

   - 사용자 지정 글꼴을 포함하여 글꼴을 자동으로 최적화합니다.

   - 개인 정보 보호 및 성능 향상을 위한 외부 네트워크 요청 제거

   - 모든 글꼴 파일에 대한 내장형 자동 자체 호스팅

   - CSS size-adjust 속성을 사용하여 자동으로 레이아웃 이동 없음

 

이 새로운 글꼴 시스템을 사용하면 성능과 개인 정보 보호를 염두에 두고 모든 Google 글꼴을 편리하게 사용할 수 있습니다.

CSS 및 글꼴 파일은 빌드 시간에 다운로드되고 나머지 정적 자산과 함께 자체 호스팅됩니다.

브라우저에서 Google로 전송되는 요청은 없습니다.

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}>

글꼴 표시, 사전 로드, 폴백 등을 포함하여 레이아웃 변경 없이 뛰어난 성능을 보장하면서 글꼴 로드 환경의 모든 부분을

사용자 지정할 수 있습니다.

 

next/link

next/link는 더 이상 수동으로 <a>를 자식으로 추가할 필요가 없습니다.

 

이 옵션은 버전 12.2에서 실험 옵션으로 추가되었으며 현재 기본값입니다.

Next.js 13에서 <Link>는 항상 <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>

---

Next.js 13버전에 업그레이드된 next/link

링크를 Next.js 13으로 업그레이드하기 위해 코드베이스를 자동으로 업데이트하는 코드 모드를 제공했습니다.

예를 들어, 이 명령은 루트로부터 실행될 때 ./pages 디렉토리에서 코드 모드를 실행합니다.

npx @next/codemod new-link ./pages

 

OG 이미지 생성

오픈 그래프 이미지라고도 하는 소셜 카드는 일부 실험에서 최대 40% 더 나은 변환을 보여줌으로써

콘텐츠 클릭 참여율을 크게 높일 수 있다.

정적 소셜 카드는 시간이 많이 걸리고 오류가 발생하기 쉬우며 유지 관리가 어렵습니다.

이 때문에, 소셜 카드는 종종 부족하거나 심지어 건너뛰기도 한다.

오늘날까지 개인화되고 즉석에서 계산되어야 하는 동적 소셜 카드는 어렵고 비용이 많이 들었습니다.

 

Next.js와 원활하게 작동하여 역동적인 소셜 카드를 생성하는 새로운 라이브러리 @vercel/og 를 만들었습니다.

// pages/api/og.jsx

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

이 접근 방식은 Vercel Edge Functions, WebAssembly, HTML 및 CSS를 이미지로 변환하고 React 구성 요소 추상화를 활용하기

위한 새로운 코어 라이브러리를 사용하여 기존 솔루션보다 5배 더 빠릅니다.

 

미들웨어 API 업데이트

Next.js 12에서는 미들웨어를 도입하여 Next.js 라우터를 최대한 유연하게 사용할 수 있게 되었습니다.

초기 API 설계에 대한 귀하의 피드백을 들었으며 개발자 환경을 개선하고 강력한 새로운 기능을 추가하기 위해 몇 가지 추가 사항을 추가했습니다.

 

이제 요청에 대한 헤더를 보다 쉽게 설정할 수 있습니다 :

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');

  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });

  // Set a new response header `x-version`
  response.headers.set('x-version', '13');
  return response;
}

이제 다시 쓰거나 리디렉션할 필요 없이 미들웨어에서 직접 응답을 제공할 수 있습니다.

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';

// Limit the middleware to paths starting with `/api/`
export const config = {
  matcher: '/api/:function*',
};

export function middleware(request: NextRequest) {
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
    return NextResponse.json(
      {
        success: false,
        message: 'Auth failed',
      },
      {
        status: 401,
      },
    );
  }
}

미들웨어에서 응답을 보내려면 현재 next.config.js 내부에 experimental.allowMiddlewareResponseBody 구성 옵션이 필요합니다.

 

주요 변경 사항

   - 최소 React 버전이 17.0.2에서 18.2.0으로 증가했습니다.

   - 최소 Node.js 버전은 12.x가 수명이 다한 이후 12.22.0에서 14.6.0으로 업그레이드 되었다.

   - swcMinify 구성 속성이 false에서 true로 변경되었습니다. 자세한 내용은 Next.js 컴파일러를 참조하세요.

   - next/image import 이름이 next.legacy/image로 변경되었습니다.

      next/future/image import 이름이 next/image로 변경되었습니다.

      코드 모드를 사용하면 안전하게 자동으로 가져오기 이름을 변경할 수 있습니다.

   - next/link 하위 항목은 더 이상 <a>일 수 없습니다.

     레거시 동작을 사용하려면 legacyBehavior prop를 추가하거나 업그레이드하려면 <a>를 제거하십시오.

     코드 모드를 사용하면 코드를 자동으로 업그레이드할 수 있습니다.

   - 사용자 에이전트가 봇인 경우 경로를 더 이상 미리 가져오지 않습니다.

   - 더 이상 사용되지 않는 next.config.js 대상 옵션이 제거되었습니다.

   - 지원되는 브라우저는 Internet Explorer를 삭제하고 최신 브라우저를 대상으로 하도록 변경되었습니다.

      여전히 브라우저 목록을 사용하여 대상 브라우저를 변경할 수 있습니다.

         - 크롬 64+

         - 엣지 79+

         - 파이어폭스 67+

         - 오페라 51+

         - 사파리 12+

 

자세한 내용은https://nextjs.org/blog/next-13을 참고하세요.