AppRouterなNext.jsで作った静的なコンテンツを出力する

背景

近年、Github PagesやCloudflare Pagesなどの、
静的なコンテンツを無料で公開できるサービスが多くなってきことに加え、
AppRouterなNext.jsに関する書籍が手元にあるので、
まず静的なコンテンツを出力してみたい。

やること

まず、Next.jsを取ってきます。

nox create-next-app

きかれたことに答えます。ここでは素直にAppRouterを選びます。

次に、next.config.jsにoutput:'export'を加えて全部静的にします。

/** @type {import('next').NextConfig} */
const nextConfig={
	output:'export',
};

export default nextConfig;

あとはお好みのSPAを作ってnpm run buildします。
するとoutというフォルダができてビルド成果物が出力されます。