ここまでのあらすじ：Auth0 に挑戦中。npx create-next-app@latest で新規 Next.js アプリを用意して、Auth0 のチュートリアル (Dashboard > Applications > Quickstart) に従ってぽちぽち進めていったところ、動いたけどなんかエラーが出る。

問題

というわけで諸々進めて、これを追加したところ。

const session = await getSession();

するとこんな感じのエラーがサーバー側で出るようになった。

Error: Route “/” used cookies().getAll(). cookies() should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

Error: Route “/api/auth/[auth0]” used params.auth0. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

提示されている URL を開いて、まあ言わんとするところはわかるんですがこちらは API 呼んでるだけなのでどうしたものか。

文章を読むと「Next.js v15 では」みたいな表現が出てくるので、まだ Auth0 側の更新が追いついてないのかなと推測。バージョンを下げてみることにする。

解決策

Next.js と React のバージョンを下げる

Next.js v15 なのでこれを v14 にする。すると react のバージョンが合わないぞとのことなので、こちらも 19 から 18 へ下げる。react-dom についても同様に言われるので同様にする。

$ npm i next@14
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.2.0" from [email protected]
npm error node_modules/next
npm error   next@"14" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/ginpei/.npm/_logs/2024-10-27T00_38_30_607Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/ginpei/.npm/_logs/2024-10-27T00_38_30_607Z-debug-0.log

というわけで、こう。

$ npm i next@14 react@18 react-dom@18

設定ファイルのバージョンを下げる

これで起動するとエラーが出る。

Error: Configuring Next.js via ‘next.config.ts’ is not supported. Please replace the file with ‘next.config.js’ or ‘next.config.mjs’.

.ts には Next.js v15 で対応したんだな。というわけで拡張子を .js にして、中身も TS 要素を削る。

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

module.exports = nextConfig;

これで普通に動くようになった。v15 の機能は使えないけど、まあ別にそこは今必要ではないので。

おしまい

追ってないのでいま調べたらまだ Next.js v15 が出てから 1 週間経ってなかったのでそのうち対応入ると思います。

ところで React のバージョンが 19.0.0-rc-69d4b800-20241021 なんですがどういうことですか、Next.js 公式的にリリース前のバージョン使わせるのアリなんですか……？