【Next.js】基本、バージョン、導入方法、Vercelとは？

Next.jsとは？

Reactのフレームワーク

SSG(Static Site Generation)

日本語で言えば「静的サイトジェネレーション」の略です。事前にHTMLを生成することでSEO対策になったり、高速でサイトを表示させれるようになったりします。特にSEO対策が要求されるサイトに向いています。

従来の「Create-react-app」などの仕組みになっている「クライアントサイドレンダリング」だとサーバーの負荷も増えてしまいますが、Next.jsの場合はこの方法だとAPIリクエストを捌く必要がなく事前にHTMLにデータを埋め込んで配信を行うのでサーバー負荷も低減できます。

なぜ従来のReactだとサーバーの負荷が増えるのか？

通常のReactだと、ユーザーが画面にアクセスしてからAxiosなどでAPIリクエストを行いデータを取得して情報を画面に埋め込んでいます。ユーザーの数が多ければ多いほど同じようにAPIアクセスを捌くことになります。

初期表示時のアクセスであれば、ユーザーごとに全く同じコンテンツを返すのにこれでは無駄にサーバーの負荷が増えることになってしまいます。

クライアントサイドレンダリングとは？

例えば、create-react-appで作ったサイトをJavaScriptを無効化した場合は何も表示されませんが、Next.jsの場合は静的なHTMLをサーバー側で作ってくれるのでサイト自体は表示されます。

フォルダ構造とファイル名に基づくPage Navigation

ReactのReact Router DOMを使うことなくページ遷移を行わせることが可能です。

ディプロイが簡単

Vercel社が開発していて、開発からデプロイまでをシームレスに行うことが可能です。

ISR(Incremental Static Regeneration)

従来のSSGではなかった技術（静的コンテンツを動的に更新はできなかった。）。しかし、ISRのおかげでユーザーアクセスを起点として動的に静的コンテンツを更新してくれます。

SSG + ISR + CSR(Client Side Rendering、useSWR)の融合

SEO対応かつリアルタイムにデータを取得してレンダリングさせることが可能になります。

導入事例

• NETFLIX
• NIKE
• Hulu
• SEO対策が要求される企業のランディングページ、HP、ブログなど

これらのサイトに共通しているポイントとしては「誰が見ても同じコンテンツ」と言うことです。例えば、NETFLIXの動画一覧やNIKEの商品一覧は誰がアクセスしたとしても同じコンテンツが表示されます。

Next.jsプロジェクトのインストール

コマンド

npm run dev

ローカルサーバーを起動する。以下のURLでアクセスすることができます。

npm run build

プロジェクトをビルドすることができる。

npm start

プロダクション環境のサーバーをローカルで起動することができる。

バージョン

バージョン	リリース日	説明
1	2016/10/25
2	2017年3月
3
4
5
6
7	2018年9月	・webpack4に対応した。
8	2019/2/11	・targetオプションを導入した。
9	2019/7/8
9.3	2020/3/25	・このバージョン以降はNext.jsはSSR専用ではなく、SSGの機能が導入された。 ・SSG用のAPIである「getStaticProps」と「getStaticPaths」とSSR用のAPIである「getServerSideProps」という新APIが登場した。（それまで使われていたSSR用APIである「getInitialProps」が非推奨になった。）
9.5	2020/7/27	・ISRが登場した。（β版としては9.4から登場していた。）
10	2020/10/27	・React17をサポートした。
11	2021/6/16	・webpack5がデフォルトで4を削除した。 ・「Create React App」からの移行機能が導入された。 ・ビルド時に「distDir(.nextフォルダ)」が自動でクリーンされるようになった。
12	2021/10/27	・過去最大のリリースらしい。 ・React18に対応した。
13	2022/11	React Server Component登場(React18の機能) App Router登場(まだこの時点ではbeta版）
13.4	2023/4	App Routerがstable版になった。(beta版で存在していたhead.tsxが廃止になった。）

Vercelとは？

Next.jsを開発しているVercel Inc.という会社が提供しているホスティングサービスです。作成したWebアプリを数十秒でデプロイしてグローバル展開できます。

料金プラン

いくつかあるが、個人で非営利で使用する場合は無料で利用することが可能。Webサービスを展開する上での強力なツールになる。

チームアカウント

会社で本番運用する場合はこれを使います。

パーソナルアカウント

少し試すだけならこれで十分

デプロイ方法

GitHub、GitLab、Bitbucketなどのリポジトリと連携する必要がある。GitHubにpushしたら自動でVercelにデプロイしてくれる設定をすることが可能です。

環境変数設定

「Settings→Environment Variables」でできる。