Next.jsの概要

• ReactをベースとしたフロントエンドのFramework

Next.jsの特徴(Reactと比較して主要部分を列挙)

SSG(Static Generation)とSSR(Server-side Rendering)をサポート

React = SPA(Single Page Application)
Next.js = SSG(Static Generation)とSSR(Server-side Rendering)

発表当初において、Next.jsはSSR用のフレームワークとしての立ち位置だったが、最近ではSSGに重きをおいたフレームワークへと変貌している。

※SPA/SSG/SSRの違い(下記、「代表的なフロントエンドの構成のおさらい」参照)
フロントエンドエンジニアのためのAWSアーキテクチャ

パフォーマンスの最適化

Next.js 独自のコンポーネントがリンク先ページのプリフェッチや画像の最適化(resizingやWebPへのフォーマット対応)などのパフォーマンスチューニングを自動で行ってくれる。

ファイルベースルーティング

Reactはreact-router-domなどのライブラリを使って、疑似的にURLを書き換えて見かけ上のページ遷移を実現している。
Next.jsは下記のようにpagesディレクトリ配下にjs/tsファイルを配置することで、URLのマッピングを自動で行う。

--project
  --pages
    -- index.js -> "/"でアクセス可能
    -- posts
      -- first-post.js -> "/posts/first-post"でアクセス可能

参考資料

• 公式サイト
• Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな
• Next.jsを使うべき5つの理由 + 実装Tips
• フロントエンドエンジニアのためのAWSアーキテクチャ