Next.js App Routerとカスタムメタデータの追加方法

Next.jsのApp Routerを使ってサイト運営を始めたら、SEO効果を高めるためにさまざまなメタタグの追加にチャレンジすることになるでしょう。特に、TypeScriptを駆使してMetadataの型定義を活用する場面では、generateMetadata関数がキーポイントになります。ただし、<meta name="thumbnail" content={image} /> のようなサムネイル画像のURLを指定したいときに、単純にthumbnailプロパティをMetadata型に追加しようとすると、「thumbnailの指定はできない」という型エラーにぶつかることがあります。ここでは、その問題に対する解決策を見ていきましょう。

解決策: Metadata型の拡張

Metadata型では直接thumbnailをサポートしていないため、otherプロパティを使用して任意のメタデータを追加する方法を採用します。ここでのキーは、other内にカスタムプロパティとしてthumbnailを追加することです。下記のTypeScriptのサンプルコードは、generateMetadata関数でMetadata型を正しく使用し、カスタムメタデータを設定する方法を示しています。

import type { Metadata } from 'next/types';

export async function generateMetadata({ params }: { params: { blogId: string } }): Promise<Metadata> {
  // データ取得関数を想定
  const data = await getDetail(params.blogId);
  
  // カスタムメタデータを含める準備
  let metadata: Metadata = {
    title: "ページのタイトル",
    description: "ページの説明",
    // otherプロパティを使ってthumbnailを追加
    other: {
      'thumbnail': data.image?.url,
    },
  };

  return metadata;
}

このコード例では、Metadata型のotherプロパティを利用してthumbnailカスタムメタタグを含めています。これにより、TypeScriptの型チェックを満たしつつ、必要なメタデータを柔軟にページに追加することができます。

この方法で、Next.js App RouterとTypeScriptを使用してサイトを運営する際のメタデータ管理における一般的な問題に対処できるでしょう。サムネイル画像などのカスタムメタデータを追加することで、検索エンジン最適化やSNSでの共有効果を高め、サイトの魅力をさらに引き出すことが可能になります。