0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Next.js 15に関する変更点のまとめ

Last updated at Posted at 2024-11-29

Next.js 15がリリースされました。

Next.js 14がリリースされたのが昨日のような気がしますが、すでにNext.js 15がリリースされました。
今回記事ではNext.js 15では以前と比べて何が変更されているのか確認したいと思います。

以下の内容は'https://nextjs.org/blog/next-15'を参考し、その内容を省略したものを記載しております。

Next.jsとは?

Next.jsはVercelが開発したReactのフレームワークで、SSRやCSR、API Routingなどの最適化機能などをサポートします。

  • install方法は以下になります。
コマンドを入力した後、質問に答えるとinstallと同時に構成することができます。
npx create-next-app@latest <プロジェクト名>
    ✔ Would you like to use TypeScript? … Yes  #TypeScriptの使用有無
    ✔ Would you like to use ESLint? … Yes  # ESLintの使用有無
    ✔ Would you like to use Tailwind CSS? … Yes  # Tailwind CSSの使用有無
    ✔ Would you like your code inside a `src/` directory? … No  # src/ directory使用有無
    ✔ Would you like to use App Router? (recommended) … Yes  # App Router使用有無
    ✔ Would you like to use Turbopack for next dev? … No  # Turbopack使用有無
    ✔ Would you like to customize the import alias (@/* by default)? … No  # `@/*` 以外経路別称の使用有無

変更点

  • 自動化されたUpgrade CLI

    • Next.js 15では@next/codemodCLIで自動的にコードベースを変更するようになりました。
      ただ、細かいコードまでは変更されないので追加で確認作業が必要になります。
  • 非同期リクエスト API

    • dataリクエストがいらないコンポーネントを非同期で処理し、初期ロード速度を早くする方向に変更されました。(paramsやsearchParamsなどのAPIが非同期になりました。)
  • Caching Semantics

    • GETリクエストやクライアントナビゲーションの基本キャッシング設定が改造されました。
    • TanStack Queryのようなライブラリーキャッシング機能と中腹しないです。
    • force-static
  • React 19へのサポート

    • React19との互換性をサポートし、React18とも一部下位互換が維持されます。
  • Component - 要素を拡張した最適化コンポーネントで、提出経路をプレパッチし、提出データをクエリーストリングで保存します。
  • Turbopack Dev安定化

    • next dev --turboモードが安定し、より高速な開発環境と反応速度を提供します。
  • 静的ルート表示機能

    • 開発中に、ルートが事前レンダリングされているかどうかを画面の右下隅に表示します(⚡ Static route)。

-非同期処理後のコード実行API(unstable_after)
ストリーミングが完了した後、非同期的に追加の作業を処理できる新しいAPIです。
まだ安定していないため、参考程度に使用することをお勧めします。

  • /instrumentation.js APIの安定化

    • サーバーライフサイクルを監視し、パフォーマンスのモニタリングやエラートラッキングを行うことができます。
  • TypeScript設定サポート

    • TypeScriptを使用した設定ファイルをサポートし、自動補完や型安全性も保証されます。
  • セルフホスティングの改善

    • キャッシュ制御ヘッダーへのさらなる制御と、画像最適化のパフォーマンス向上が実現しました。
  • セキュリティ強化

    • サーバーアクションが公開エンドポイントとして露出するのを防ぐ機能が追加され、セキュリティが強化されました。
  • 外部パッケージバンドルの最適化

    • 外部パッケージをバンドルするための設定オプションが追加されました。
  • ESLint 9のサポート

    • ESLint 9をサポートし、最新のルールを反映し、互換性を維持します。
  • ビルドおよび開発パフォーマンスの改善

    • 静的ページ生成の最適化と、サーバーコンポーネントのHMR(Hot Module Replacement)機能の強化が行われました。

最後に。。

Next.js15で変更されたのがすごくたくさんあってびっくりしました。特にReact19に合わせてupdateされたのでこれからReact19と合わせて使用することのが楽しみでございます。

引き続きよろしくお願いします。

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?