[번역] Next.js 13

원문: https://nextjs.org/blog/next-13\

Next.js Conf에서 발표한 바와 같이 Next.js 13은 제한없이 동적으로 동작할 수 있는 기반을 마련합니다.

• app/ 디렉토리(beta): 더 쉽고, 빠르고, client js가 적습니다.
  • Layouts
  • React Server Components
  • Streaming
• Turbopack (alpha): 최대 700배 빠른 Rust 기반의 Webpack 대체재
• 신기능 next/image (stable): 기본 브라우저의 lazy loading으로 더욱 빨라졌습니다.
• 신기능 @next/font (beta): layout 변경이 발생하지 않는 자동 자체 호스팅 폰트
• 향상된 next/link: 자동 생성되는 <a> 태그로 단순화된 API

최신 버전으로의 업데이트는 하단 코드를 실행해주세요

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

app/ Directory (beta)

Next.js의 기능 중 가장 사랑받은 기증 중 하나는 파일 시스템 기반의 라우터입니다. 파일을 폴더 안에 넣는 것으로, 어플리케이션의 라우트를 즉시 생성할 수 있습니다. 별도 설정은 필요하지 않습니다.

우리는 app/ 디렉토리(beta)를 도입하여 Next.jsdml 라우팅과 레이아웃 경험을 개선하고 있습니다. 이는, 전에 커뮤니티 피드백에서 배포한 Layouts RFC의 결과물입니다. 새로운 라우터는 다음 사항들을 지원합니다.

• Layouts: 상태를 유지하고 비용이 높은 리렌더링을 회피하면서 경로간의 UI를 쉽게 공유할 수 있습니다.
• Server Components: 가장 동적인 어플리케이션에 대해서 기본값을 서버 우선으로 설정합니다.
• Streaming: 즉각적인 로딩 상태를 표시하고 렌더링되는 UI 단위로 스트리밍합니다.
• Support for Data Fetching: async 서버 컴포넌트와 확장된 fetch API는 컴포넌트 레벨의 페칭을 가능하게 합니다.

Next.js 13으로 업그레이드할 때, app/ 경로를 사용할 필요는 없지만, app/ 경로는 점진적 적용을 위해 기존 pages 경로와 공존할 수 있습니다.

---

Layouts

app/ 경로는 상태를 유지하고, 비용이 높은 리렌더링을 방지하며 고급 라우팅 패턴을 활성화하는 복잡한 인터페이스를 쉽게 배치할 수 있습니다. 또한, 중첩 레이아웃을 작성할 수 있으며, 컴포넌트, 테스트, 스타일과 같은 경로에 어플리케이션 코드를 배치할 수 있습니다.

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

layouts, pages에 대해 자세히 알아보거나 예제를 배포하여 사용해 보세요.

---

Streaming

app/ 경로는 렌더된 UI 단위를 점진적으로 렌더링하고 클라이언트에 점진적으로 스트림하는 기능을 도입합니다.
Next.js에서 서버 컴포넌트와 중첩 레이아웃을 사용하면, 특별히 데이터가 필요하지 않은 화면의 일부를 즉시 렌더할 수 있고, 데이터를 가져오는 화면의 부분에 대한 로딩 상태를 표시할 수 있습니다. 이러한 접근방식을 사용하면, 사용자는 전체 페이지와 상호작용하기 전에 전체 페이지가 불러지는걸 기다리지 않아도 됩니다.

Vercel에 배포될 때, app/ 경로를 사용하는 Next.js 13 어플리케이션은 성능 향상을 위해 기본적으로 Node.js와 Edge 런타입 모두에서 응답을 스트림합니다.

스트리밍에 대해 자세히 알아보거나 예제를 배포하여 사용해 보세요.

---

Data Fetching

리액트의 최근 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 웹 API는 React, Next.js에서 확장되었다. 이는 fetch 요청을 자동으로 중복 제거하고 컴포넌트 레벨에서의 fetch, 캐싱, 데이터 재검증에 대한 유연한 방법을 제공한다. 이는 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가 렌더링될 때 스트리밍하는 인체 공학적 방법을 활성화하고 있습니다. 향후 릴리스에서는 데이터 변형도 개선하고 단순화할 것입니다.

우리는 오픈소스 커뮤니티, 패키지 관리자, React 에코시스템에 기여하는 기타 회사와 협력하여 새로운 React, Next.js 시대를 위한 작업을 기쁘게 생각합니다. 컴포넌트 내부에서 가져오는 데이터를 같은 위치에 배치하고 클라이언트에 더 적은 JavaScript를 제공하는 기능은 `app/`디렉토리에 포함하게 된 커뮤니티 피드백의 두 가지 중요한 부분이었습니다.

데이터 가져오기에 대해 자세히 알아 보거나 예제를 배포하여 사용해 보세요.

---

Turbopack 소개 (alpha)

Next.js 13은 웹팩의 새로운 러스트 기반 후속 제품인 Turbopack을 포함하고 있습니다.

웹팩은 3억회 이상의 다운로드 되었습니다. 웹팩이 웹 구축의 필수적인 부분이었지만, 자바스크립트 기반의 도구로서 가능한 최대 성능에 도달했습니다.

Next.js 12에서 우리는 네이티브 러스트 기반 툴로의 전환을 시작했습니다. 우리는 바벨에서 다른 곳으로 마이그레이션하는 것으로 시작하여, 17배 더 빠른 트랜스파일 결과를 이끌어 냈습니다. 그리고, Terser를 교체하여, 6배 더 빠른 축소 결과를 이끌어 냈습니다. 이제 번들링을 위해 네이티브에 올인할 때입니다.

Next.js 13에서 Turbopack 알파를 사용했을 때의 결과는

• Webpack보다 700배 빠른 업데이트
• Vite보다 10배 빠른 업데이트
• Webpack보다 4배 빠른 콜드 스타트

Turbopack은 개발에 필요한 최소한의 번들만 필요로 하기 때문에, 시작 시간이 매우 빠릅니다. 3000개의 모듈을 포함하는 어플리케이션에서, Turbopack은 기동까지 1.8초가 걸렸습니다. 반면에 Vite는 11.4초, Webpack은 16.5초가 걸렸습니다. Turbopack은 서버 컴포넌트, 타입스크립트, JSX, CSS 등에 대하여 지원합니다. alpha 버전동안, 많은 기능들이 아직 제공되지 않습니다. Turbopack을 사용하여 로컬 반복 속도를 높이는 것에 대한 여러분의 피드백을 듣고 싶습니다.

참고: Next.js의 Turbopack은 현재 next dev만을 지원합니다. 지원 기능을 확인하세요. 우리는 터보팩을 통한 next build의 지원을 추가하기 위해 작업을 진행중입니다.

Next.js 13에서 next dev --turbo 명령어를 통해 Turbopack alpha를 사용해보세요.

---

next/image

Next.js 13은 강력한 새로운 이미지 컴포넌트를 소개합니다. 간단히 이미지를 표시하고, layout 변경이 발생하지 않고 성능 향상을 위해 필요에 따라 파일을 최적화 할 수 있습니다.

Next.js 커뮤니티의 설문조사에서 응답자의 70%는 프로덕션 환경에서 Next.js 이미지 컴포넌트를 사용했으며, 핵심 웹 바이탈의 향상을 확인했다고 했습니다. Next.js 13에서 next/image를 더욱 발전시켰습니다.

새로운 이미지 컴포넌트는:

• 적은 양의 Javascript 코드를 갖습니다.
• 더 쉽게 스타일링과 설정이 가능합니다.
• 기본적으로 alt속성을 필수로 하여 접근성 향상
• 웹 플랫폼에 맞게 조정
• hydration을 필요로 하지 않는 네이티브 레이지 로딩으로 인한 속도 향상

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로 업되이트 되는 codemod를 제공합니다. 예를 들어, 이 커맨드를 root 경로에서 실행하면 ./pages 경로에서 codemod를 실행합니다.

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

codemod에 대해 자세히 알아 보거나 문서를 확인하십시오.

---

@next/font

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

• 커스텀 폰트를 포함하여 폰트를 자동으로 최적화합니다.
• 향상된 성능과 개인정보 보호를 위해서 외부 네트워크의 요청을 제거합니다.
• 모든 폰트 파일에 대하여 내장형 자동 자체 호스팅을 제공합니다.
• CSS size-adjust 속성을 사용하여 자동으로 레이아웃 이동을 발생시키지 않습니다.

이 새로운 폰트 시스템을 사용하면, 성능과 개인 정보 보호를 염두에 두고 모든 구글 폰트를 편리하게 사용할 수 있습니다. CSS 및 폰트 파일은 빌드 시 다운로드되며 나머지 정적 요소와 함께 자체 호스팅됩니다. 브라우저에서 구글로 요청을 보내지 않습니다.

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

font-display, 사전 로딩, fallback 등을 포함하여 뛰어난 성능과 레이아웃 변경 없이 폰트 로딩의 경험 대부분의 부분을 커스터마이즈할 수 있습니다.

새로운 글꼴 구성 요소에 대해 자세히 알아 보거나 예제를 배포하여 사용해 보십시오.

---

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>

개선된 Link 구성 요소에 대해 자세히 알아 보거나 예제를 배포하여 사용해 보십시오.

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

Next.js 13의 link로 업그레이드를 위해 자동으로 여러분의 코드베이스를 업데이트하는 codemod를 제공합니다. 예를 들어, 이 커맨드를 root 경로에서 실행하면 ./pages 경로에서 codemod를 실행합니다.

npx @next/codemod new-link ./pages

codemod에 대해 자세히 알아 보거나 설명서를 확인하십시오.

---

OG 이미지 생성

오픈 그래프 이미지로 알려져 있는 소셜 카드는 콘텐츠 클릭율을 크게 높일 수 있으며, 일부 실험에서는 최대 40% 더 나은 전환을 보여줍니다.

정적 소셜 카드는 시간의 소비, 에러 처리, 유지보수가 어려운 문제가 있습니다. 이 때문에, 소셜 카드가 부족하거나 스킵되괸 합니다. 오늘날, 개인화되고 즉시 계산되어야 하는 동적 소셜 카드는 어렵고 비용이 많이 발생합니다.

우리는 새로운 라이브러리 @vercel/og를 만들어 Next.js와 원활하게 작동하게 만들었습니다.

// 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배 더 빠릅니다.

OG 이미지 생성에 대해 자세히 알아 보거나 예제를 배포하여 사용해 보십시오.

---

미들웨어 API 업데이트

Next.js 12에서 Next.js 라우터와의 최대한의 유연성을 가능하게 하기 위해 Middleware를 도입했습니다. 초기 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;
}

또한 이제 rewrite나 redirect 없이 미들웨어에서 직접 리스폰스를 제공할 수 있습니다.

// 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설정이 필요합니다.

---

주요 변경사항

• 최소 요구 리액트 버전이 17.0.2에서 18.2.0으로 올랐습니다.
• 12.x 버전이 지원 종료되어 최소 요구 Node.js 버전이 12.22.0에서 14.6.0으로 올랐습니다.
• swcMinify 설정의 기본 값이 false에서 true로 변경되었습니다. 더 많은 정보를 위해 Next.js Compiler를 확인하세요
• next/image가 next/legacy/image로, next/future/image가 next/image로 변경되었습니다. codemod로 자동으로 안전하게 import문을 수정할 수 있습니다.
• next/link의 자식으로 <a>를 가질 수 없습니다. legacyBehavior 속성을 통해 기존 코드를 유지하거나 <a>를 없애서 업그레이드 하세요. codemod로 자동으로 코드를 업그레이드 할 수 있습니다.
• User-Agent가 봇이면 더이상 경로들이 프리페치되지 않습니다.
• 지원 종료된 target 옵션이 next.config.js에서 제거되었습니다.
• 지원 브라우저가 변경되어 Internet Explorer가 제거되고 최신 브라우저를 타겟으로 설정했습니다. 여전히 Browserslist를 사용하여 대상 브라우저를 변경할 수 있습니다.
  • 크롬 64+
  • 엣지 79+
  • 파이어폭스 67+
  • 오페라 51+
  • 사파리 12+

자세한 내용은 업그레이드 가이드를 확인하세요