Next.js 13.2 업데이트 살펴보기 (1/3)

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

이번 글에서는 최근에 업데이트 된 Next.js 13.2의 업데이트 내용을 살펴보도록 하겠습니다.

---

먼저 첫 번째 업데이트 내용은 Built-in SEO Support 입니다.

이제 Next.js에 SEO를 위한 기능이 기본적으로 내장되게 됩니다.

SEO는 Search Engine Optimization의 약자로써, 검색엔진에서 웹페이지가 잘 검색되도록 최적화 하는 작업을 의미합니다.

meta 태그의 데이터를 각 페이지마다 동적으로 변환시키는 것이 대표적인 SEO의 작업 중 하나라고 할 수 있습니다.

기존 Next.js에서는 SEO를 하기 위해서 SSR(Server Side Rendering)을 구현해야 했고,

meta 태그를 동적으로 쉽게 변환해서 제공하기 위해서 아래 링크에 나와있는 next-seo라는 패키지를 많이 사용했었습니다.

 

https://github.com/garmeeh/next-seo

GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

 

그런데 이번 업데이트에서는 이제 외부 패키지 없이도 SEO를 할 수 있도록 기능이 Next.js에 내장된 것이죠.

아래와 같이 SEO를 할 페이지에서 Metadata라는 type으로 export하기만 하면 된다고 합니다.

외부 패키지를 사용하지 않으니 굉장히 깔끔하고 편리해진 것 같습니다.

// app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};

 

SEO를 할 때 어떤 페이지는 정적인 metadata를 제공하기만 하면 되지만,

특정 페이지들은 동적으로 metadata를 제공해야 할 경우가 있습니다.

그런 경우에는 아래와 같이 generateMetadata라는 함수를 사용해서 처리하면 된다고 합니다.

// Static metadata
export const metadata = {
  title: '...',
};

// Dynamic metadata
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}

 

동적으로 metadata를 제공해야 하는 경우를 예로 들어보면,

쇼핑몰에서 특정 제품 페이지에 해당 제품의 사진과 이름, 설명 등을 제공해야 하는 경우입니다.

위 예시 코드에도 나와 있는 것처럼, 이런 경우에는  서버 사이드에서 제품의 정보를 받아온 뒤에 이 정보를 metadata에 채워넣으면 됩니다.

그렇게 되면 각 제품 페이지 별로 제품의 사진과 이름, 설명 등이 metadata에 들어간 채로 나오게 됩니다.

이번에 추가된 이 기능은 꽤 많은 개발자들로 부터 환호를 받을 것 같습니다.

---

이번 업데이트에 두 번째로 추가된 기능은 Route Handlers 입니다.

Route Handlers는 특정 route에 대해서 웹 Request와 Response API를 사용하는 request handler를 만들 수 있게 해주는 기능입니다.

기존에는 Next.js에서 pages/api 디렉토리 내에 위치한 route에 대해서만 이런 요청을 처리할 수 있도록 되어 있었습니다.

이 경우에는 route path가 무조건 /api로 시작하게 된다는 제약 사항이 있었습니다.

하지만 이번 업데이트로 인해서 /api가 아닌 다른 route path에 대해서도 request handler를 만들 수 있게 되었습니다.

 

아래 그림은 Next.js 공식문서에서 발췌한 것입니다.

그림에 나타난 것처럼 app/list-items/ 디렉토리 내에 route.ts 파일을 만들어 둠으로써,

해당 경로로 오는 request를 처리할 수 있게 됩니다.

이 기능을 활용하면 조금 더 다양한 route path를 구성해서 웹 애플리케이션을 만들 수 있을 거라고 생각됩니다.

Route Handlers에 관한 더 자세한 내용은 아래 공식문서를 참고하시기 바랍니다.

 

https://beta.nextjs.org/docs/routing/route-handlers

Routing: Route Handlers | Next.js

---

이번 Next.js 13.2버전의 업데이트 내용이 많기 때문에 다음 글에서 이어서 살펴보도록 하겠습니다.

감사합니다.