Next.jsとは

フレームワークは、決まりごとの束

Next.js は React のフレームワークです。React が「画面を組み立てる道具」だとすると、フレームワークは「アプリ1本を作るのに必要なものを、置き場所ごと決めたもの」です。

前のレッスンで見た2つの困りごとを、Next.js は次のように解きます。

サーバーで先に描く

サーバーで HTML を組み立ててから返すやり方を SSR と呼びます。Server Side Rendering の略です。ブラウザに届いた時点で商品名が入っているので、JavaScript を待たずに文字が見えます。検索エンジンのクローラーも、その HTML をそのまま読めます。

React だけでこれをやろうとすると、サーバーを自分で書き、ルーティングを自分で組み、ビルドの設定を自分で書くことになります。それを毎回やるかわりに、決まった置き場所に従えば動くようにしたのが Next.js です。

選択肢は1つではない

React でサーバー側の描画を扱う道具は Next.js だけではありません。React実践で使った React Router にも、フレームワークモードという同じ役目のやり方があります。すでに React Router でルーティングを書いているなら、そのまま延長で使えるのが強みです。

このコースが Next.js を選ぶのは、求人と情報量がいちばん多く、詰まったときに調べて解決できるからです。ただし「React でサーバー描画といえば Next.js しかない」と覚えてしまうと、現場で選択肢を狭めます。名前だけは今のうちに知っておいてください。

演習

困っていたことと、Next.js がどう解くかの対応表を作ります。