Next.js

読み

ネクストジェイエス

意味

  • ReactをベースにしたプロダクションレディなフルスタックフレームワークでSSR・SSG・ISRなど柔軟なレンダリング戦略を提供
  • ファイルベースルーティングやAPIルート、画像最適化などWeb開発に必要な機能を標準搭載した統合環境
  • VercelがメンテナンスしSEO最適化やパフォーマンス向上を容易にする企業サイトやECサイトに適したReactフレームワーク

比喩

Reactという車に高性能パーツを組み込んだスポーツカー。基本は同じだがより速く便利。

語源

Next（次の）＋.js（JavaScript）。Reactの次世代フレームワークという意味

例文

  • Next.jsでブログサイトをSSGで構築しビルド時に全ページを静的生成した
  • Next.jsのgetServerSidePropsでSSRを実装しリクエストごとに最新データを取得した
  • App RouterとServer Componentsを活用しサーバーサイドで直接データベースにアクセスした

よくある勘違い

  • Next.jsとReactを別物だと考えること→Next.jsはReactの上に構築されたフレームワーク
  • Next.jsなら常にSSRだと思い込むこと→SSG、ISR、CSRも選択できる
  • Pages RouterとApp Routerを混同すること→App Routerは新しいルーティング方式で別アプローチ

関連用語

ReactSSRSSG