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公式ドキュメント

https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-static-nextjs-site/

# やってみた

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

https://qiita.com/acronhub/items/850b7ee4fb2dc121ee63

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

## プロジェクトを作成


## Githubリポジトリにプッシュ

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

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

## Cloudflare Workers & Pages を準備

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

![pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/1731b42f-6d42-7638-85f8-9c2141f4e95b.png)

連携が完了するとリポジトリを選択することができます
![pages2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/1e10f146-aae0-07c6-0abe-5c8acd1b11cf.png)

プロダクジョンブランチ、フレームワークプリセットを選択します
プレームワークプリセットは、`Next.js(Static HTML Export)`を選択します
![pages3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/bc3fc853-6227-13e1-2eb8-4794976b849d.png)







# 失敗

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

以下のようなエラーが出た
```shell
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で指定します


```shell
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

```json: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 
```





# 確認

```shell
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`にアクセスします

![pages_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/c0cc4d0a-3bb7-ae8b-7f27-3f10b63bb72b.png)


# 最後に
誰かの参考になれば幸いです:relaxed: