"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { children: [_jsx(_components.code, { children: "generateMetadata" }), " の使い分け【Next.js App Router 対応】"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "generateMetadata" }), " は、Next.js App Router においてページごとのメタデータ（SEO情報やOGP）を", _jsx(_components.strong, { children: "動的あるいは静的に生成する関数" }), "です。"] }), "\n", _jsxs(_components.p, { children: ["この記事では、実際のコード例をもとに **「ブログ記事ページ」", _jsx(_components.strong, { children: "と" }), "「静的ページ」**の2パターンを比較し、それぞれの使い分け方・ベストプラクティスを解説します。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "🔍 比較対象となるパターン" }), "\n", _jsx(_components.h3, { children: "① 動的ルート用（例：ブログ記事）" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n{`export async function generateMetadata({\n params,\n}: {\n params: Promise<{ slug: string }>;\n}): Promise {\n const { slug } = await params\n const post = await getPostBySlug(slug)\n\n return {\n title: post.title,\n description: post.description,\n openGraph: {\n title: post.title,\n description: post.description,\n type: 'article',\n publishedTime: post.publishedAt,\n modifiedTime: post.updatedAt,\n url: \\`https://example.com/blog/\\${slug}\\`,\n images: [\n {\n url: getOgImage(post.title),\n },\n ],\n },\n }\n}`}\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "② 静的ルート用（例：/about ページ）" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n{`export async function generateMetadata(): Promise {\n const title = 'About | example.com'\n const description = 'このサイトの運営者についてご紹介します。'\n\n return {\n title,\n description,\n openGraph: {\n title,\n description,\n type: 'website',\n url: 'https://example.com/about',\n images: [\n {\n url: getOgImage(title),\n },\n ],\n },\n }\n}`}\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "📊 違いと特徴まとめ表" }), "\n", _jsxs(_components.p, { children: ["| 項目 | 動的ページ（ブログ） | 静的ページ（Aboutなど） |\n|----------------------------|------------------------------------------|----------------------------------------|\n| ", _jsx(_components.strong, { children: "引数" }), " | ", _jsx(_components.code, { children: "params" }), " を受け取り、slugを利用 | 引数なし |\n| ", _jsx(_components.strong, { children: "ルーティング" }), " | ", _jsx(_components.code, { children: "/blog/[slug]" }), " のような", _jsx(_components.strong, { children: "動的ルート" }), " | ", _jsx(_components.code, { children: "/about" }), ", ", _jsx(_components.code, { children: "/contact" }), " などの", _jsx(_components.strong, { children: "静的ルート" }), " |\n| ", _jsx(_components.strong, { children: "メタデータの生成方法" }), " | slug から記事情報を取得し動的に生成 | タイトル・説明をその場で定義 |\n| ", _jsx(_components.strong, { children: "OG画像の生成方法" }), " | slugや記事タイトルをパラメータとして利用 | 固定タイトルをパラメータとして使用 |\n| ", _jsx(_components.strong, { children: "柔軟性" }), " | 投稿ごとに異なるメタ情報に対応可能 | 固定なので軽量かつ保守が簡単 |\n| ", _jsx(_components.strong, { children: "利用される場所" }), " | ", _jsx(_components.code, { children: "app/blog/[slug]/page.tsx" }), ", ", _jsx(_components.code, { children: "layout.tsx" }), " | ", _jsx(_components.code, { children: "app/about/page.tsx" }), " など |"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "💡 使い方のポイント" }), "\n", _jsx(_components.h3, { children: "✅ 動的ルート用 generateMetadata（例：ブログ記事）" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["ルートパラメータ（", _jsx(_components.code, { children: "params.slug" }), "）を元に、そのページの投稿内容を取得"] }), "\n", _jsxs(_components.li, { children: ["記事の ", _jsx(_components.code, { children: "title" }), " や ", _jsx(_components.code, { children: "description" }), "、", _jsx(_components.code, { children: "publishedTime" }), " などを", _jsx(_components.strong, { children: "個別に組み立て" })] }), "\n", _jsxs(_components.li, { children: ["OGP画像は ", _jsx(_components.code, { children: "/api/og?title=記事タイトル" }), " のように", _jsx(_components.strong, { children: "動的に生成" })] }), "\n", _jsx(_components.li, { children: "SNSシェア・SEOに最適化された構成が可能" }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n`getPostBySlug` や `getOgImage` は独自実装が想定されます。DBやCMSから記事データを取得し、OG画像生成APIを呼び出す構成です。\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "✅ 静的ページ用 generateMetadata（例：About）" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "引数は不要" }), "\n", _jsxs(_components.li, { children: ["タイトルや説明を", _jsx(_components.strong, { children: "その場で定義" })] }), "\n", _jsxs(_components.li, { children: ["OGP画像も固定タイトルをパラメータにして生成するなど、", _jsx(_components.strong, { children: "静的な構成" })] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\nページ内容が頻繁に変わらない場合はこのパターンが適しています。表示も高速かつ保守性が高いため、会社概要や利用規約などに有効です。\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "🧠 まとめ：どちらを使うべき？" }), "\n", _jsxs(_components.p, { children: ["| シーン | 選ぶべきパターン |\n|--------------------------------------|--------------------------------------|\n| ", _jsx(_components.code, { children: "/blog/[slug]" }), " などのブログ記事ページ | ✅ ", _jsx(_components.code, { children: "params" }), "付き ", _jsx(_components.code, { children: "generateMetadata" }), " |\n| ", _jsx(_components.code, { children: "/about" }), ", ", _jsx(_components.code, { children: "/contact" }), " などの静的ページ | ✅ 引数なしの ", _jsx(_components.code, { children: "generateMetadata" }), " |"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "🚀 実装におけるポイント（補足）" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "App Routerでの設計" }), "：", _jsx(_components.code, { children: "generateMetadata" }), " は ", _jsx(_components.code, { children: "page.tsx" }), " または ", _jsx(_components.code, { children: "layout.tsx" }), " と同階層に配置。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "型安全性" }), "：", _jsx(_components.code, { children: "Promise" }), " を返すようにして、型チェックを効かせる。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "パフォーマンス" }), "：静的にできるものは極力静的に。ビルド時に確定できる情報はそちらで。"] }), "\n"] }), "\n", _jsx(_components.hr, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Next.js App Router における generateMetadata の2つの実装パターン解説