Next.js 13.2 버전 정리

이번에 Next.js 13.2버전이 나오면서 여러 기능들이 추가됐습니다. 어떤 내용인지 알아봅시다.

Built-in SEO Support

기존의 Next.js 12버전에서는 next/head를 사용했고 Next.js 13버전에서는 head.js 파일에서 meta 태그나 open graph를 넣어줬죠.
Next.js 13.2에서는 좀 더 쉬운 인터페이스를 사용합니다.

아래 코드와 같이 static, dynamic 메타데이터를 define할 수 있습니다.

// app/layout.tsx

import type { Metadata } from 'next';

// static한 메타데이터
export const metadata: Metadata = {
  title: 'Next.js 13.2',
  description: 'Welcome to Next.js 13.2',
};

// dynamic한 메타데이터
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}

Custom Route Handlers

Next.js 13.2 버전에서 api route 기능이 추가됐습니다. 기존 Next.js 12에서는 page/api 디렉토리에 정의해서 이를 사용했습니다. Next.js 13.2버전에서는 app/ 디렉토리에 route.ts라는 이름으로 정의해주면 됩니다. 다만 주의할 점으로 page.ts와 같은 레벨에 위치할 수 없습니다. page.ts도 request를 받기 때문에 conflict이 발생합니다. 이럴 경우에는 api/ 디렉토리 하위에 넣으면 됩니다.

HTTP 메서드 정의를 함수의 이름으로 정의하면 됩니다.
app/api/route.js

export async function GET(request) {
  return new Response("Hello, Next.js 13.2!");
}

export async function POST(request) {
  // do something
  return new Response("Hello, Next.js 13.2!");
}

한가지 더 알아둬야할 점으로는 node.js와 edge runtime에서 Response라는 추상화된 객체를 사용한다는 점입니다. 기존에는 node.js와 edge runtime에서 response로 사용하는 인터페이스가 달랐죠. 이를 추상화하여 사용하기 더 편하게 만든 것 같은데 DX를 고려한 설계인 것 같습니다.

Statically Typed Links

Link 컴포넌트 href에 typing이 추가됐습니다. 존재하지 않은 route를 사용하면 typescript error가 발생합니다.

import Link from 'next/link'

// ✅
<Link href="/about" />
// ✅
<Link href="/blog/nextjs" />
// ✅
<Link href={`/blog/${slug}`} />

// ❌ TypeScript errors if href is not a valid route
<Link href="/aboot" />

Improved Error Overlay

에러가 발생했을때 이 에러가 react에서 발생한건지 next에서 발생한건지 더 직관적으로 알 수 있게끔 UI가 업데이트 됐습니다.

Next.js Cache

React server component에서 static, dynamic, revalidate를 fetch api와 함께 설정할 수 있습니다.

아래 코드에서 보는 것과 같이 fetch api의 옵션으로 설정하여 해당 데이터에 대한 캐쉬 전략을 다르게 가져갈 수 있습니다. 기존에 관심사가 분리된 인터페이스에서 컴포넌트와 함께 이러한 옵션들을 설정하도록 업데이트가 됐네요.

// app/page.jsx

export default async function Page() {
  const [staticData, dynamicData, revalidatedData] = await Promise.all([
    // Cached until manually invalidated
    fetch(`https://...`),
    // Refetched on every request
    fetch(`https://...`, { cache: 'no-store' }),
    // Cached with a lifetime of 10 seconds
    fetch(`https://...`, { next: { revalidate: 10 } }),
  ]);

  return <div>...</div>;
}

MDX for Server Components

mdx는 markdown에서 jsx 문법을 사용할 수 있도록 합니다. Next.js 13.2에서는 mdx를 사용해 content를 렌더링할 수 있습니다. 또는 remote에 있는 마크다운 contents를 가져와서 그릴 수 있는 기능도 있습니다.

Rust MDX Parser

mdx를 parser를 rust로 다시 썼다고 합니다. 기존에는 javascript parser를 사용하고 있었기 때문에 더 빠르게 parsing하겠네요.

Other improvements

https://nextjs.org/blog/next-13-2#other-improvements

마치며

Next.js는 하루가 멀다하고 새로운 기능이 계속해서 추가되고 있네요. 조금만 트렌드를 follow up하지 않으면 현업에서 사용하는 인터페이스가 언제 확 바뀔지 몰라서 계속 polling하면서 변화에 적응해야할 것 같습니다.