お仕事で触ることになるので、概要から勉強します
公式 docs

Next.js

・Next.jsは、ReactをベースにしたJavaScriptのフロントエンドのアプリケーションフレームワーク

・Reactと違い、Next.jsはサーバー機能を備えているため、Next.jsを導入することで、他にサーバーを用意することなくWEBページを表示することができる

・また、サーバー機能のみではなく、WEBサイト構築に必要な最低限の仕組みも用意されている

Next.jsのメリット

ゼロコンフィグ機能

→ 開発するプロジェクトに応じた設定を自動でおこなってくれる機能

一般的に、ライブラリやフレームワークを利用する際には、使用するライブラリ、フレームワークに応じた環境を整えるために、関連するパッケージのインストールなどを手動で行う必要があるが、Next.jsでは、最低限の設定を自動で行ってくれるため、環境構築が簡単

ハイブリッドなレンダリング CSR / SSR

Next.jsでは、CSR（Client Side Rendering）に加え、SSR（Server Side Rendering）と呼ばれるサーバーサイド（WEBアプリケーションを提供している側）でレンダリングを行う方法を設定することもが可能

※ SSRはリクエストごとにHTMLの作成を行うため、ページによっては待ち時間が多くなってしまう可能性がある
こちらを解決するために、SSG（Static Site Generation）が備わっている

SSG

静的にサイトを生成する機能
サービスをビルドする際にHTMLの構築を行い、ユーザーからリクエストされた際に事前に作ったHTMLを表示することでレンダリングにかかる時間を大幅に軽減することが出来る機能

Next.jsではCSR, SSR, SSG, を活用してレンダリング方法を選択できる
描画が早い一方、表示するデータが頻繁に更新されるようなアプリケーションには不向きなので、画面の特徴に応じてレンダリング方法を変更する

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

ページのルーティングをファイルシステムの構造に基づいて自動的に設定する機能

通常、Webアプリケーションでは、URLと対応するページやエンドポイントを個別に設定する必要があるのですが、Next.jsでは、フォルダとファイルの階層構造を利用して、自動的にルーティングを設定することができる

pagesという特定のフォルダ内のファイルとフォルダが自動的にルーティングに対応する

pages/
  ├── index.js
  ├── about.js
  └── products/
      ├── index.js
      ├── category1/
      │   └── item1.js
      └── category2/
          └── item2.js

・/は pages/index.jsにマッピングされる
・/aboutはpages/about.jsにマッピングされる
・/products は pages/products/index.jsにマッピングされる
・/products/category1/item1 は pages/products/category1/item1.js にマッピングされる

React VS Next.js

	React	Next.js
フレームワーク	フレームワークではなく、ライブラリ	フレームワーク
レンダリング方法	CSR (Client Side Rendering) のみサポート	CSR と SSR (Server Side Rendering) の両方をサポート
ルーティング	ルーティングの設定が個別に必要	ファイルベースルーティング機能により自動的に設定
ツール設定	ツール設定（バンドリング、コンパイルなど）が必要	ツール設定が抽象化され、自動的に設定される
静的サイト生成	サポートされていない	SSG (Static Site Generation) をサポート
開発効率	追加の機能や最適化を手動で設定する必要がある	追加の機能や最適化がNext.jsに組み込まれている

Reactはライブラリであり、コンポーネントベースのUIの構築をサポートする
一方、Next.jsはフレームワークであり、Reactコンポーネントに構造、機能、最適化を追加するための機能がある
ReactはCSR（Client Side Rendering）に対応しており、クライアント側でのレンダリングをする
Next.jsはCSRに加えてSSR（Server Side Rendering）もサポートしていて、サーバー側でのレンダリングも可能
Reactではルーティングの設定を個別に行う必要がありますが、Next.jsではファイルベースルーティング機能により、フォルダとファイルの構造を利用して自動的にルーティングを設定することができます
Reactではツール設定（バンドリング、コンパイルなど）を個別に行う必要がありますが、Next.jsではこれらのツール設定が抽象化され、自動的に設定されます
Next.jsではSSG（Static Site Generation）をサポートしており、事前にHTMLを生成することでレンダリングの時間を軽減することができます。Reactではこの機能はサポートされていない
開発効率に関しては、Reactでは追加の機能や最適化を手動で設定する必要がありますが、Next.jsではこれらの機能や最適化がフレームワークに組み込まれているため、開発効率が向上する

【Next.js】Next.jsとは - Reactとの違い -