Next.jsの静的HTMLをCloudflare Pagesで動くようにしてみた

これはなに？

Next.jsの静的HTMLをCloudflare Pagesを利用して、表示させます

環境

• Windows11
  • WSL2
    • Ubuntu 20.04
  • Docker Desktop
• VS Code
  • Remote WSL
• Next.js 14.2.5

Cloudflare公式ドキュメント

やってみた

他の記事で、Docker上でNext.jsが動作する環境を用意したのを利用します

公式ドキュメントに書いてあるように進めていきます

プロジェクトを作成

Githubリポジトリにプッシュ

Next.jsのプロジェクトをプッシュします

$ git add .
$ git commit -m 'Create next.js'
$ git push -u origin main

Cloudflare Workers & Pages を準備

Pagesを選択してGithubと連携します

連携が完了するとリポジトリを選択することができます

プロダクジョンブランチ、フレームワークプリセットを選択します
プレームワークプリセットは、Next.js(Static HTML Export)を選択します

失敗

Next.jsのバージョンによっては失敗します

以下のようなエラーが出た

06:55:01.711	Error: Exit with error code: 1
06:55:01.711	    at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
06:55:01.711	    at Object.onceWrapper (node:events:652:26)
06:55:01.711	    at ChildProcess.emit (node:events:537:28)
06:55:01.711	    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
06:55:01.722	Failed: build command exited with code: 1
06:55:06.849	Failed: error occurred while running build command

これはYarnのバージョンが1ではなかったために起きています
Cloudflareの環境変数にYarnのバージョンを1で指定します

10:28:13.575	Route (app)                              Size     First Load JS
10:28:13.575	┌ ○ /                                    5.25 kB        92.3 kB
10:28:13.575	└ ○ /_not-found                          871 B          87.9 kB
10:28:13.576	+ First Load JS shared by all            87 kB
10:28:13.576	  ├ chunks/23-b75664ace61c0abb.js        31.5 kB
10:28:13.576	  ├ chunks/fd9d1056-2821b0f0cabcd8bd.js  53.6 kB
10:28:13.576	  └ other shared chunks (total)          1.86 kB
10:28:13.576	
10:28:13.577	
10:28:13.577	○  (Static)  prerendered as static content
10:28:13.577	
10:28:13.615	Finished
10:28:13.616	Note: No functions dir at /functions found. Skipping.
10:28:13.616	Validating asset output directory
10:28:13.616	Error: Output directory "out" not found.
10:28:14.542	Failed: build output directory not found

Next.js13以降からエクスポートを指定する必要があります
https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig 

確認

10:37:44.898	✨ Success! Uploaded 29 files (2.50 sec)
10:37:44.898	
10:37:45.448	✨ Upload complete!
10:37:47.324	Success: Assets published!
10:37:49.249	Success: Your site was deployed!

これがでたら成功しています

出来上がったページを確認するには、概要の 訪問するリンクから確認することができます
https://xxxx.pages.devにアクセスします

最後に

誰かの参考になれば幸いです