Next js 13.3 공식문서
https://nextjs.org/blog/next-13-3
2023.04.07 / Next js 13.3 버전이 출시되었다. 이번에 추가된 기능에 대해 찾아보자
1. File-Based Metadata API
- Next.js 13.2 버전에 추가된 Metadata API에 추가되는 기능이다.
- 기존 Metadata API 에서는 title, meta, link 태그를 정적 or 동적으로 설정할 수 있게 했었지만
정적 태그
// layout.js or page.js
export const metadata = {
title: 'Home',
};
// Output:
// <head>
// <title>Home</title>
// </head>
export default function Page() {}
동적 태그
export async function generateMetadata({ params, searchParams }) {
const product = await getProduct(params.id);
return { title: product.title };
}
// Output:
// <head>
// <title>My Unique Product</title>
// </head>
export default function Page() {}title, meta, link태그 외에도 아래 항목들을 추가로 주입할 수 있게 됐다
opengraph-image.(jpg|png|svg)
twitter-image.(jpg|png|svg)
favicon.ico
icon.(ico|jpg|png|svg)
sitemap.(xml|js|jsx|ts|tsx)
robots.(txt|js|jsx|ts|tsx)
manifest.(json|js|jsx|ts|tsx)ex) 아래와 같은 폴더경로를 설정해서 파일 기반 메타데이터 API를 이용해보자
app전체에favicon을 설정/about경로에og:image를 추가
app
├── favicon.ico
├── layout.js
├── page.js
└── about
├── opengraph-image.jpg
└── page.js경로에 따라 아래와 같이 태그를 주입해준다
// Visiting "/"
<link rel="icon" href="<computedUrl>"/>
// Visiting "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />애플리케이션에 정적 파일을 추가하는 것이 가장 간단하고 일반적이지만 파일을 동적으로 만들어야 하는 경우가 있다. sitemap.js 파일을 생성해서 동적 경로 배열을 반환하는 파일을 추가해서 동적 사이트맵을 생성할 수 있다.
// app/sitemap.js
export default async function sitemap() {
const res = await fetch('https://.../posts');
const allPosts = await res.json();
const posts = allPosts.map((post) => ({
url: `https://acme.com/blog/${post.slug}`,
lastModified: post.publishedAt,
}));
const routes = ['', '/about', '/blog'].map((route) => ({
url: `https://acme.com${route}`,
lastModified: new Date().toISOString(),
}));
return [...routes, ...posts];
}2. Dynamic Open Graph Images
next/server의 ImageResponse를 사용해서 이미지를 생성
// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';
export const runtime = 'edge';
export default function og() {
return new ImageResponse();
// ...
}next.js 에서 제공하는 다른 api 와 같이 사용할 수 있다. file-based-Metadata와 같이 opengraph-image.tsx파일에서 빌드 or 요청 시 동적으로 og:image 및 twitter image를 생성할 수 있다.
FE