Next.jsのAppRouter (AppDir) が、v13.3からSSG (export) でもサポートされてた
日高凌個人的に大ニュースだけど、あんまり話題になってない？
日高凌テンプレートを更新しよう。
日高凌一応ガイドに沿ってバージョンアップする
日高凌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
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エラーになるから、ディレクトリごと削除が必要
日高凌ホットリロード (next dev) で無事立ち上がった。
日高凌今の状態で静的出力できるか確認。
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ディレクトリに出力してくれるようになったらしい。
問題なく出力できた。
日高凌試しに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に対応してなかった。
日高凌Voltaを使っているので、voltaでyarn v1をインストール
$ volta install yarn@1
success: installed and set yarn@1.22.19 as default
Nodejsのバージョン指定がないとNode@12.18.0が適用されるので、.node-versionを追加。
v17.*しか対応していないから、v17.9.1を指定。
日高凌無事デプロイ完了
00:47:38.169 ✨ Success! Uploaded 28 files (1.59 sec)
00:47:38.169
00:47:38.528 ✨ Upload complete!
00:47:40.258 Success: Assets published!
00:47:41.109 Success: Your site was deployed!
日高凌動的ルーティングの確認
DummyJSONのPostAPIを使って、簡易なブログサイトを作成
日高凌ServerComponentsと同じく、非同期コンポーネント内でフェッチしてデータ取得ができる模様
日高凌記事一覧ページのサンプルを作成
