編集

Next.js v13.2リリース、Metadata APIとCustom Route Handlers追加

#Next.js

Next.js v13.2 リリース。

#Metadata API によるビルトイン SEO サポート

今までの head.js が非推奨になり、代わりに Metadata API が利用可能に。

メタデータが静的な場合は metadata を layout.js や page.js から export し、動的な場合は、 generateMetadata メソッドを export する。

ts
import type { Metadata } from "next";

// 静的な場合
export const metadata = {
  viewport: "width=device-width, initial-scale=1",
  title: "My App",
  description: "My App Description",
  openGraph: {
    type: "website",
    // ...
  },
  twitter: {
    card: "summary",
    //...
  },
} satisfies Metadata;

// 動的な場合、記事ページなど
export async function generateMetadata({
  params,
  searchParams,
}): Promise<Metadata> {
  const data = await getData(params.id);
  const metadata = {
    title: data.title,
    // ...
  } satisfies Metadata;
  return metadata;
}

Metadata API では、設定がルートからマージされる。head.js ではページ毎に設定する必要があった。 次の例では、app/page.jsで設定した twitter の設定が、app/about/page.jsの設定に引き継がれる。

ts
// app/page.js
export const metadata = {
  title: "My App",
  description: "My App Description",
  twitter: {
    card: "summary",
    site: "@site",
    creator: "@creator",
    images: "https://example.com/image.png",
  },
} satisfies Metadata;

// app/about/page.js
export const metadata = {
  title: "About",
  description: "About Description",
  // twitterの設定が引き継がれる
} satisfies Metadata;

また、どのページでも後ろ側にブランド名を入れたいといったケースに簡単に対応できる機能も追加。 次の例では、これを指定したページ以下の階層でtitleにAboutを指定すると、About｜My Appのようなタイトルになる。

tsx
export const metadata = {
  title: {
    default: "My App",
    template: `%s | My App`,
  },
};

https://beta.nextjs.org/docs/api-reference/metadata

#Custom Route Handlers

pages/apiの App directory バージョン。

今まで App directory であっても、API を実装したい場合はpages/apiを追加する必要があった。 今後はpage.jsの代わりにroute.jsを追加するだけで、API を実装できる。

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

Link コンポーネントの href に型が付くようになり、存在しないページへのリンクの防止が可能。 この機能はappディレクトリだけでなく、pagesディレクトリでも利用できる。 ただし、ベータ版であるため、next.config.jsにexperimental.typedRoutesを追加する必要がある。

js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
};

module.exports = nextConfig;

#参考文献

編集