Next.jsで環境構築するメリット

【用語解説】

**Babel：**古いバージョンのjsしか使えない環境でも新しいバージョンのjsを使えるようにするために必要。サポートしてくれる。コンパイルしてくれる。JSX記法をjsに変換するのにも必要。
**Webpack：**複数のファイルを1つのファイルにまとめて出力してくれるツール。モジュールバンドラ。

ちなみにgulpはタスクランナーで、Web制作の中で行う作業（＝タスク）、例えばコンパイルやファイルの圧縮などを自動化してくれるツールのこと。より詳細な違いは以下参照のこと。

https://qiita.com/annaaida/items/f2c372000e8358ea8d8f
**Code Splitting ：**コードを分割すること。Webpackで1つにまとめるが、コード量が多いと読み込みに時間がかかってしまう。そのために、今のページ、次のページを考慮して、今必要なコードのみを分割・読み込めるようにすること。それがNext.jsだと初期設定済みで楽。
**Pre-render：**事前に読み込んでおくこと。（Pre：事前に render：レンダリング・読み込み）

次のページ分も事前に読み込んでおくことで、パフォーマンスを高める。

【補足】

React, Next.jsではBabel + Webpackの設定が最初からされていて、自分でする必要がないから楽だよーってこと。

jsに関してだけだけど、コンパイルならBabel, バンドラならWebpackと現場ではスタンダードになってきているので、余裕がある人（create-react-appでの環境構築に慣れてきて、且つ時間に余裕がある人）は、一からBabel, Webpackの設定をしてみると凄く勉強になるし、現場でも役に立つときがあるよ。
「サーバーサイドの処理を簡単に実装できる」＝APIを簡単に作れる