🌟
[Next.js] generateStaticParams, generateMetadataの使い方

2025/06/21に公開
ブログ記事を動的に取得して表示していませんか？

今回はNext.jsでブログ記事のような動的ルーティングのページを事前に静的生成する方法を紹介します。

 環境Next.js v14.1
React v19.0.0

 ブログ詳細ページを作成サンプルとしてブログの詳細ページを作成します。

下記のコードを記載します。
app/posts/[id]/page.tsx
import { fetchPost, fetchPosts } from "../../../hooks/fetch"
import type { PostType } from "../../../types"

// 静的生成用の関数
export async function generateStaticParams() {
	const posts = await fetchPosts()

	return posts.data.map((post: PostType) => ({
		id: post.id.toString(),
	}))
}

// メタデータの生成
export async function generateMetadata({ params }: { params: { id: string } }) {
	const post = await fetchPost(params.id)

	return {
		title: `${post.data.name} - To You Design`,
		description: post.data.about,
	}
}

export default async function PostPage({
	params,
}: {
	params: { id: string }
}) {
	const post = await fetchPost(params.id)

	return <PostDetail post={post.data} />
}
最初にgenerateStaticParamsを利用します。

上記のFunctionsは、ブログデータの一覧を取得し、各記事のidを使って静的ルートを定義しています。

これにより、ビルド時に各記事ページが事前に生成され、初回アクセス時の読み込みが高速になります。

https://nextjs.org/docs/app/api-reference/functions/generate-static-params
その次に、generateMetadataを利用します。

上記のFunctionsは、静的にメタデータを生成することができます。

今回の例では、generateStaticParamsで作ったパスに対して、メタデータを設定しています。

titleとdescriptionを記事ごとに設定しています。

https://nextjs.org/docs/app/api-reference/functions/generate-metadata
似たとしてFunctionsは、generateImageMetadataもあります。

これは画像のメタデータを作ることができます。

https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata
そして最後のPortfolioPageの関数では、paramsで渡ってきたidに対して、

一致するpostデータを取得しています。

そして、そのpostデータをブログ記事のコンポーネントに渡しています。
次に表示するサンプルのブログ詳細のコンポーネントです。
app/posts/[id]/post-detail.tsx
import type { PostType } from "../../../types"

interface PostDetailProps {
	post: PostType
}

export const PostDetail = ({ post }: PostDetailProps) => {
	//サムネイル
	return (
		<main>
			<article>
				<img src={post.img} alt={post.title} />
				<h1>{post.title}</h1>
			</article>
		</main>
	)
}
上記をapp/posts/[id]/page.tsxの中に書くのではなく、コンポーネントに分離して、見た目の整理や再利用性を高めています。

 まとめgenerateStaticParamsやgenerateMetadataを活用することで、動的ルーティングされたページもビルド時に事前生成でき、metadetaも作成できます。

これにより、表示速度の向上やSEOの改善が期待でき、ユーザー体験の向上にもつながるので、おすすめです。
環境

ブログ詳細ページを作成

まとめ

Discussion
