静的HTMLのエクスポート(Static Exports)

WordPressのREST APIとNext.js(App Router)を使ってヘッドレスCMSを作成していた時のこと。WordPressの記事詳細や一覧をNext.jsで静的HTMLファイル(SSG)として生成してAWSのS3にアップ…みたいなことをしたい。そこでnext.config.jsに以下を記載。

• 関連記事：Next.js13のApp Routerで404ページ作成＆静的エクスポート

const nextConfig = {
output: 'export',
}
module.exports = nextConfig

開発環境で正常に稼働するかを確認する。

$ npm run dev

開発環境で、WordPressのデータ取得、記事一覧から記事詳細へのページ遷移も問題なく稼働していることを確認できました。

さて、実際にWordPressのブログを記事を静的ファイルで出力してみます。

$ npm run build

しかし、実際に出力されたファイルには404.html以外のhtmlファイルが一切なく、動的ルーティングで出力された記事一覧や記事詳細のhtmlファイルも一切吐き出しされませんでした…。

┌ λ /
├ ○ /_not-found
├ ● /[slug]
├   ├ /hogehoge
├   ├ /fugefuge
…
○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
λ  (Dynamic)  server-rendered on demand using Node.js

よく見るとドキュメントルートのディレクトリがλ (Dynamic) と動的レンダリング(SSR)になっています。なぜだろう？と思ってコードを調べるとfetchの仕方に問題が有りました。

const url = await fetch(process.env.JSON_URL,{cache: 'no-store'}).then(〜);

fetchでキャッシュをcache:no-storeにすると、動的レンダリング(SSR)になってしまいます。

• Rendering: Server Components | Next.js

これはドキュメントにも書いてあります。そこで、fetchを以下のようにしたところ

const url = await fetch(process.env.JSON_URL).then(〜);

正常に静的レンダリングが行われ、静的HTMLファイルが出力されました。ドキュメントはよく読もう、わたし。

┌ ○ / 
├ ○ /_not-found
├ ● /[slug]
├   ├ /hogehoge
├   ├ /fugefuge
…
○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)

次回、WordPressを出力するのコードを掲載予定（覚えてれば）

おしまい♥

タグ：JamstackNext.jsnpm(Node.js)WordPress