Next.js 15 に上げていくぞ！
15アプリケーションは２つ上げる予定
- Pages Router + MUI (emotion)
- App Router + Tailwind
15Pages Router + MUI (emotion) のやつは emotion が React 19 に対応してなくて無理っぽい
15なので以降は App Router + Tailwind の話
15 npx @next/codemod@canary upgrade latest
すべてデフォルトの選択肢をえらんでいったら、したらいくつかの warn を吐きつつも終了
npm run dev
したら
- Unsupported Next.js configuration option(s) (next.config.js)
To use Turbopack, remove the following configuration options:
- experimental.typedRoutes
とか言われる。
どうやら Turbopack だと typedRoutes に未対応らしい。
どちらにしろ experimental な機能で、そんなにプロジェクト内で役に立っていなかったので、Turbopack を使うことを優先して typedRoutes はオフにする。
workerThreads や cpus は Turbopack でも（たぶん）対応している。
experimental: {
workerThreads: false,
cpus: 1,
},
左下に routes の種別が出るようになった。
これは嬉しい。
15Turbopack の恩恵はよくわからない
15 npx @next/codemod@canary upgrade latest
だとパッケージの解決がうまく行ってないように見えるので、空っぽのディレクトリから作り直す
これでどこが悪いのかわかるはず
npx create-next-app@latest
初期インストールは問題ない
15swr のせいでうまく行っていなかった模様。
そもそも swr 使ってないのに package.json に入っていたので削除。
swr はこのコミットで React 19 対応が入ったようだけれども、リリースはされていない
React 19 では swr ではなく use を使うほうが良さそう
15export async function GET(request: NextRequest, { params: { type } }: { params: Params }) {
みたいに書いているところが悪くて、
export async function GET(request: NextRequest, { params }: { params: Promise<Params> }) {
const type = (await params).type
こう書くべきらしい
15next/font/google が Cloudflare WARP を使ってるとダメ
そんなことある？
15上げたぞ！
15MUI v6 だと emotion じゃなくて Pigment CSS が使えるので、それにしたら上げられるかも