Next.js とは？概要や特徴を詳しく解説

こんにちは、Syuu（ @syuu_n18）です。

最近よく Next.js という単語を聞くけどよくわからない。という方もいらっしゃると思います。
私も以前までは使ったことすらなかったのですが、個人サービスを作るために利用して以降、その魅力にどっぷりハマっている一人になっています。

この記事ではそんな最近話題になっている React のフレームワークである Next.js について解説していきます！

Next.js とは？

JavaScript の有名な3大ライブラリして React、 Vue、 Angular　があり、そのうちの Next.js は React のフレームワークになります。

The React Framework for Production

と公式にかかれている通り「プロダクトを公開するために必要なものが揃ったフレームワーク」となっています。

React と Next.js の違い

よく JavaScript ライブラリの React と Next.js はどう違うのかといった質問を見かけます。
決定的に違うのは React が JavaScript ライブラリなのに対して、Next.js は React のフレームワーク ということです。

なので、Next.js を使う場合は必然的に React も使う必要があります。

イメージ的には React はあくまで ライブラリのため自由度が高く 、その設計なども開発者に任せられています。
逆に Next.js は フレームワークのためベストプラクティスというものがある程度決められて おり、そのルールに沿って開発することで効率的に開発を進めていくことが可能です。

特徴

Next.js の便利な機能としては以下のようなものがあります。

画像最適化
ファイルベースルーティング
複数のレンダリング方法
ファストリフレッシュ
ゼロコンフィグ

画像最適化

Next.js では従来の img タグの代わりに Image タグというものを使うことで簡単に画像ファイルの最適化をおこなうことができます。

使い方としては簡単で、以下のように img タグの代わりに Image タグを使用するだけです。

従来の書き方

<img src="http://example.com/image.png" />

Image を使った書き方

import Image from 'next/image'

<Image
 src="http://example.com/image.png"
 height={400}
 width={600}
/>

ただし、見ていただけると分かるように height と width を指定することが必須となっています。

ページ表示時に必要なサイズへリサイズされ無駄がなくなるのと共に WebP という次世代の画像フォーマットへ変換してくれるため高速に画像を提供することができます。

また、画像最適化を Cloudinary などの外部サービスへ任せることもできるため、こちらについては後日詳しく記事にしようと思います。

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

React でルーティングをおこなう場合、 react-router-dom などのライブラリをを使うのが一般的です。

Next.js では標準でルーティングのための機能が用意されており、 /pages というフォルダ配下においたファイルが自動的にルーティングとして設定されます。

例えば /pages/about.jsx というファイルをおいた場合、about.jsx のページへは以下のパスでアクセスできるようになります。

http://localhost:3000/about

このように簡単にルーティングが設定できるのも特徴の1つです。

複数のレンダリング方法

従来の React のようにクライアントサイド（CSR）でレンダリングするだけでなくサーバーサイド(SSR)やビルド時に全てのファイルを静的ファイルとして出力する(SSG)などプロダクトの特徴に合わせて柔軟にレンダリング方法を変更することが可能です。

Client Side Rendering（CSR）
Server Side Rendering（SSR）
Static Site Generator（SSG）
Incremental Static Regeneration（ISR）

という4種類のレンダリング方法が存在します。
こちらに関しては別記事で詳しく解説しようと思います。

ファストリフレッシュ

ファストリフレッシュとは開発環境においてソースコードが変更された場合に変更があった箇所のみ再描画されブラウザの画面が更新されるといった便利な機能です。

これだけだと React の Hot Reload と同じですが、Next.js では state と維持したまま更新がおこなわれます。

例えば state で値が管理されているフォームへ何か入力し、そのフォームのスタイルを変更した場合に入力された値が保持されたままスタイルが変更されます。
これにより快適に開発を進めていくことができます。

ゼロコンフィグ

コンセプトとして ゼロコンフィグ を掲げているため上記のような便利な機能はほとんど事前の設定などが必要なくインストール後すぐに使い始めることができます。

また、必要な場合は next.config.js というファイルを作ることで細かく設定を変更することも可能となっています。

まとめ

Next.js には今回ご紹介した機能の他にもまだまだ便利な機能が存在しており、それらを活用することで最高の開発体験を獲得することができます。

ここまで読んでいただきありがとうございました！
このブログも Next.js を活用して作成しており、今後も積極的に使用していきたいと思っています。

Gizanbeak