Open4
まだNext.js 13.4のApp routerで静的サイト作らない方がいい件について
チェチェNext.js13で大きく変わったのは App Router の登場ではないかと思います。
- 2022/10/25 Next.js13の発表記事
https://nextjs.org/blog/next-13 - App Router公式ドキュメント
https://nextjs.org/docs/app
チェチェApp Routerで静的ページをビルド方法を調べてました。
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
$ npm run build
でdistフォルダーが生成されhtml/js/cssファイルが書き出されました。
チェチェただ、App Routerの静的ページ生成にはまだサポートしてない機能が多くあります。
今現在(2023/10/6 Next.js13.4の時点)サポートしてない内容はこちら
-
Dynamic Routes with
dynamicParams: true -
Dynamic Routes without
generateStaticParams() - Route Handlers that rely on Request
- Cookies
- Rewrites
- Redirects
- Headers
- Middleware
- Incremental Static Regeneration
-
Image Optimization with the default
loader - Draft Mode
ダイナミックルートやリダイレクト、ミドルウェアなど、よく使われる機能がまだサポートされていないため、あの機能を入れた実装になるとビルド時にエラーになります。
チェチェもし、静的ページで上記の機能を使いたい場合はApp Routerの代わりにPage Routerを使いましょう。