Next.jsについて簡単にまとめてみる

はじめに

Next.jsを勉強したので、Next.jsとは何か、またNext.jsを使うメリットについてまとめてみます。

Next.jsとは何か？

Next.jsとは、Reactのフレームワークです。

(ReactはJavaScriptのライブラリです)

ライブラリとフレームワークの違いは、簡単にまとめると、フレームワークは開発の土台になるもので、すべてのファイルのベースとなります。一方、ライブラリは必要に応じて使える便利なツールのようなもので、ファイルごとに必要な場所で必要なタイミングで使う、といった違いがあります。

この方の記事がとても分かりやすかったです。

Reactをより効率的に使えるようにするための土台、のようなイメージです。

Next.jsを使うと何が嬉しいのか？

環境設定が不要になる

• BabelやWebpack の複雑な環境設定がすべて完了した状態でプロジェクトを開始できる（ただし、これはcreate-react-appでも同じです）。
• CSSについてもデフォルトでCSS Modulesの設定がされているため、すぐにCSSが使用できます。

レンダリングのタイミングを選択できる

• SSR (サーバーサイドレンダリング)、CSR (クライアントサイドレンダリング)、SG (静的生成)など、画面をレンダリングするタイミングを選択することができます。
• Next.jsではすべてのページを事前にHTMLを生成（pre-render）するため、高速に画面を描画することができます。

ファイルベースルーティングが使える

• Reactではルーティングの設定を個別に行う必要があり、これが手間のかかる記述でしたが、Next.jsではpagesディレクトリ配下にページを作成し、Linkコンポーネントでパスを指定することで簡単にファイルベースのルーティングを行うことができます。
• ただし、最新バージョンではApp Routerが採用されているため、ここは最新情報のキャッチアップが必要です。

まとめ

Next.jsを使うことで、より簡単に、より高速にReactを使ったプログラム開発ができるようになります。