EY-Office ブログ

少し前にReact 19.2がリリースされ、それを使っているNext.js 16がリリースされました。そこで、React教育で使っている演習コードをNext.js 16にアップデートしてみたところ、思わぬところに変更点がありました。

ただし、結論としては既存のNext.js 15.x(React 19.1.x)のコードはほとんど影響ないと思います。

Bing Image Creatorが生成した画像をGemini 2.5 Flash Imageで編集した画像を使っています

動かなくなったコード

実は動かなくなったのはPrismaを使っているコードでした。オリジナルを作成した時点ではPrismaのバージョンは5.21でしたが、現在は6.19です。オリジナルを作成した手順でインストールと設定を行った時点で以下のエラーが発生しました。

$ npx prisma init
  ・・・
$ npx prisma migrate dev -n create_scores
Failed to load config file "/Users/yy/tmp/w2/jyanken_server" as a TypeScript/JavaScript module. Error: PrismaConfigEnvError: Missing required environment variable: DATABASE_URL

調べてみると6.19ではnpx prisma initのログの最後に以下のように表示されていました。

Next steps:
1. Install `dotenv`, and add `import "dotenv/config";` to your `prisma.config.ts` file to load environment variables from `.env`.
2. Run prisma dev to start a local Prisma Postgres server.
3. Define models in the schema.prisma file.
4. Run prisma migrate dev to migrate your local Prisma Postgres database.
5. Tip: Explore how you can extend the ORM with scalable connection pooling, global caching, and a managed serverless Postgres database. Read: https://pris.ly/cli/beyond-orm

ということで、以下の対応を行いました。

• .envファイルのDATABASE_URL=データベースのURLを書く
  • 5.21の時はデータベースのurlはschema.prismaに直接書いていました
• dotenv npmをインストール
• Prismaを使うコードに import "dotenv/config"; を追加
• prisma.config.tsにも import "dotenv/config"; を追加

警告が出たコード(1)

最初に書いたように、Next.js 16はNext.js 15.x(React 19.1.x)のコードはほとんど影響ないと思います。 ただし、一部のコードでESLintのチェックを行うと以下のような警告が出ていました。

Error: Calling setState synchronously within an effect can trigger cascading renders

Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
* Update external systems with the latest state from React.
* Subscribe for updates from some external system, calling setState in a callback function when external state changes.

Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended.

警告を日本語に翻訳すると「エフェクト内で同期的にsetStateを呼び出すと、連鎖的な再レンダーが発生する可能性があります」です、 警告の出たコードは以下です。

export default function Home() {
  const [books, setBooks] = useState<BookType[]>([]);

  useEffect(() => {
    setBooks([  // ←------ ここで警告が発生
      {month: 1, day: 1, item: "お年玉", amount: 10000},
      {month: 1, day: 3, item: "ケーキ", amount: -500},
      {month: 2, day: 1, item: "小遣い", amount: 3000},
      {month: 2, day: 5, item: "マンガ", amount: -600}
    ]);
  }, []);

なぜこんなコードが書かれているかは説明すると長くなるので省略しますが、歴史的な経緯です。😅
動作としては問題がありませんが、教育テキストのコードなので警告の出るコードを以下のように修正する事にしました。

const initialBooks: BookType[] = [
  {month: 1, day: 1, item: "お年玉", amount: 10000},
  {month: 1, day: 3, item: "ケーキ", amount: -500},
  {month: 2, day: 1, item: "小遣い", amount: 3000},
  {month: 2, day: 5, item: "マンガ", amount: -600}
];

export default function Home() {
  const [books, setBooks] = useState<BookType[]>(initialBooks);

React19の公式ドキュメントのuseEffectを見ると。useEffect は、コンポーネントを外部システムと同期させるための React フックです。 と書かれていますね、そのような目的にしぼった方が良いようです。

警告が出たコード(2)

Tailwind CSSを使っているコンポーネントをVS Codeで表示すると以下のような警告が出ていました。

これは、VS Codeにインストールされた拡張機能Tailwind CSS IntelliSenseのLinting機能は警告を出しています。
私はTailwind CSSの設計思想等に詳しくないので、AI(Claude Sonnet4.5)に聞いてみると以下のような回答がありました。

Tailwind CSSが max-w-7xl を推奨する理由を説明します。

1. 一貫性のあるスケールシステム

Tailwind CSSは、サイズに関して統一的なスケールを持っています：

xs → sm → md → lg → xl → 2xl → 3xl → 4xl → 5xl → 6xl → 7xl

このスケールは、幅だけでなく、テキストサイズ、余白、その他のプロパティにも使われています。7xl を使うことで、このシステムに統一されます。

2. screen- は例外的な存在*

max-w-screen-xl の screen-* は、ブレークポイント（レスポンシブデザインの画面サイズ）から派生した名前です。これは：

• もともとブレークポイントとの対応関係を示すために追加された
• しかし、実際には max-w-7xl と同じ値を指している
• 冗長で混乱を招く可能性がある

3. シンプルさと予測可能性

<!-- こっちの方がシンプル -->
<div class="text-7xl max-w-7xl">

<!-- screen-* は余分な概念 -->
<div class="text-7xl max-w-screen-xl">

同じスケール感覚で統一されている方が、開発者にとって覚えやすく、予測しやすいのです。

まとめ

screen-* は歴史的な理由で残っていますが、Tailwind CSSのデザインシステムとしては 数値ベースのスケール（7xlなど） に統一する方が、コードベース全体の一貫性が保たれるということです。

ということで max-w-7xlを使う事にしました。

まとめ

Next.js 13(React 19)ではReact Server Componentsという大きな変更が導入されましたが、それ以降のNext.js/Reactは機能改善や性能向上が中心となっています。そのため、今回のNext.js 16へのアップグレードでは、Next.js 15のコードがほぼ問題なく動作すると考えられます(もちろん、完全に保証するものではありませんが)。

また、今回のブログで紹介したように、ESLintなどの有用な警告が追加され、より良いコードが書けるようになった点は嬉しいです。