Zenn
Open16

Next.jsのAppRouter (AppDir) が、v13.3からSSG (export) でもサポートされてた

Next.js
Node.js
React
Cloudflare
日高凌日高凌

next.config.jsにoutput: "export"を追加すればいいみたい。

(appDir: trueはドキュメントから消えていたけど、不要になったのかな)

前言撤回。無いとと怒られた

Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config
next.config.js
diff --git a/next.config.js b/next.config.js
index dafb0c8..3f7a5f7 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
-}
+  output: "export",
+};
 
 module.exports = nextConfig
日高凌日高凌

初期生成ファイルにpages/api/hello.tsが含まれていたから、怒られた。

error - API Routes cannot be used with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export

pagesディレクトリがあると競合して404エラーになるから、ディレクトリごと削除が必要

日高凌日高凌

今の状態で静的出力できるか確認。

Deploying
With a static export, Next.js can be deployed and hosted on any web server that can serve HTML/CSS/JS > static assets.

When running next build, Next.js generates the static export into the out folder. Using next export is no longer needed. For example, let's say you have the following routes:

next buildだけでoutディレクトリに出力してくれるようになったらしい。

https://beta.nextjs.org/docs/configuring/static-export#deploying

問題なく出力できた。

日高凌日高凌

試しにCloudflare Pagesにデプロイしてみる

presetはNext.js (Static HTML Export)

Build commandがデフォルトのnext build && next exportから変更next buildに変更

日高凌日高凌

ビルドエラーになった。

00:28:56.900	➤ YN0001: │ Error: While persisting /opt/buildhome/repo/.yarn/cache/@next-swc-linux-x64-gnu-npm-13.3.0-6ab306e5f1-8.zip/node_modules/@next/swc-linux-x64-gnu/ -> /opt/buildhome/repo/node_modules/@next/swc-linux-x64-gnu ENOENT: no such file or directory, scandir '/node_modules/@next/swc-linux-x64-gnu'
00:28:56.900	    at is (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:372:10045)
00:28:56.900	    at js (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:372:10309)
00:28:56.900	    at Xr.readdirSync (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:31941)
00:28:56.901	    at Xr.readdirPromise (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:31807)
00:28:56.901	    at makeCallPromise.requireSubpath (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:57575)
00:28:56.901	    at /opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:59182
00:28:56.901	    at On.getZipPromise (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:60944)
00:28:56.901	    at async On.makeCallPromise (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:59128)
00:28:56.901	    at async On.readdirPromise (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:377:57469)
00:28:56.901	    at async o (/opt/buildhome/repo/.yarn/releases/yarn-3.3.1.cjs:706:4320)
00:28:56.901	➤ YN0000: └ Completed in 2s 285ms
00:28:56.902	➤ YN0000: Failed with errors in 2s 729ms
00:29:00.709	Error during Yarn install
00:29:00.714	Failed: build command exited with code: 1
00:29:01.535	Failed: error occurred while running build command

確認したらYarn v2に対応してなかった。

https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools

日高凌日高凌

Voltaを使っているので、voltaでyarn v1をインストール

$ volta install yarn@1                              
success: installed and set yarn@1.22.19 as default