Reactだけじゃない？Next.jsを知ろう
目次
はじめに
最近、フロントエンド開発でNext.jsを使っているプロジェクトが多くなっているように感じます。お客様からNext.jsの経験を求められることも増えているため、Next.jsについて知っておくとよいでしょう。
「そもそもNext.jsって何？」「Reactと何が違うの？」「Next.jsってReactじゃないの？」と思う方もいるかもしれません。そして、もっと重要なのは「なぜこれほど多くの企業がNext.jsを使っているの？」ということではないでしょうか。
この記事では、Next.jsについて知ることで、どのようなときにNext.jsを使うのか、そしてどのように使うのかを理解するための基礎を紹介します。
そもそもNext.jsって何ですか？
Next.jsは、Reactをベースにしたフレームワークで、Webアプリケーションを効率よく、簡単に開発するために使われています。Reactに取って代わるものではなく、Reactをベースにさまざまな機能を追加することで、Webアプリケーションの開発や最適化をしやすくしています。
Next.jsには、すべてを自分で設定しなくても、パフォーマンスやSEOを意識したアプリケーションを構築できるさまざまな機能が用意されています。その一つがサーバーサイドレンダリング（SSR）で、その他にもルーティングなどの機能があります。
多くのプロジェクトでNext.jsが使われているのは、WebサイトやSPA、ECサイトなど、さまざまな現代的なWebアプリケーションを簡単に構築できるからです。
Next.jsのメリットを学びましょう
この記事では、Next.jsが開発において提供する3つの主なメリットに焦点を当てて紹介します。今回紹介するメリットは以下の3つです
- サーバーサイドレンダリング
- ルーティング
- パフォーマンス上の利点
サーバーサイドレンダリング (SSR)
通常、Reactアプリケーションを構築する場合、レンダリングの多くはユーザーのブラウザ上で行われます。Next.jsでは、サーバー上でページをレンダリングしてから、ブラウザに送ることができます。これをServer-Side Rendering（SSR）と呼びます。
サーバー上でコンテンツをレンダリングすることで、ブラウザ上でJavaScriptが実行されるのを待つのではなく、サーバー側でデータを取得した状態のページをユーザーに表示することができます。これにより、初回読み込み時のユーザー体験を改善できるほか、検索エンジンがページのコンテンツを理解しやすくなるというメリットもあります。
Next.jsのApp Routerでは、Server Componentがデフォルトで使用されます。Server Componentでは、コンポーネント内でサーバー側からデータを取得することができます。
例えば、以下のようにコンポーネントをasync関数として定義し、サーバー側でデータを取得できます。
export default async function Page() {
// サーバー側で情報を取得
const res = await fetch('https://example.com/data')
const data = await res.json()
return (
<h1>{data.title}</h1>
)
}
このように、Server Componentではサーバー側でデータを取得してからページをレンダリングできます。ページをリクエストごとに動的にレンダリングする場合は、サーバー上で最新のデータを取得してページを生成し、その結果をブラウザに返すことができます。
一方、ユーザーの操作に応じて画面を動的に変更するなど、ブラウザ側での処理が必要な場合はClient Componentを使用します。このように、Next.jsではServer ComponentとClient Componentを使い分けることで、サーバー側とブラウザ側それぞれの特徴を活かした開発ができます。
ルーティング
通常、開発者はライブラリを使用したり、ルーティング用のコンポーネントを作成したりして、アプリケーションのルーティングを構築する必要があります。
Next.jsには、ファイルの配置場所に基づいてルートを自動的に作成するルーターが用意されています。appディレクトリにファイルを追加すると、そのファイルに対応するルートを自動的に作成できます。そのため、ページを適切なフォルダに配置するだけで、簡単にアプリケーションのルーティングを構築できます。
例:
app/
├── page.tsx
├── about/
│ └── page.tsx
└── products/
└── page.tsx上記のファイル構成は、以下のルートに対応します。
/
/about
/productsReact自体はUIを構築するためのライブラリなので、ルーティングなどの機能は別途用意する必要があります。一方、Next.jsではこうした機能が最初から用意されています。
パフォーマンス上の利点
Next.jsには、パフォーマンスを向上させるためのさまざまな機能が標準で用意されているため、高速でレスポンスのよいWebアプリケーションを開発しやすくなっています。
例えば、`<Image />`を使用することで、画像のリサイズや圧縮、WebP/AVIFへの変換、Lazy Loadingなどの最適化を行うことができます。
また、Next.jsにはコード分割（Code Splitting）も標準で用意されています。これにより、アプリケーション全体を一度に読み込むのではなく、必要なコードだけを読み込むことができます。
アプリケーション全体を読み込む場合、読み込むファイルのサイズが大きくなり、特に通信速度の遅いネットワークやモバイル端末では、ページの読み込みに時間がかかってしまいます。コード分割を利用することで、必要なコードだけを読み込むことができ、初回読み込み時の負担を減らすことができます。
Next.jsでは、静的なページを作成することもできます。これは、リクエストごとにサーバー側で処理を行う必要がないページに適しています。ページをあらかじめ生成しておくことで、リクエスト時の処理を減らし、より高速にページを表示できます。
静的なページとサーバーサイドでレンダリングされるページは、SEOの面でもメリットがあります。検索エンジンのクローラーは、最初からページのコンテンツを確認できるためです。一方、クライアント側でレンダリングされるページでは、JavaScriptが実行されるまでコンテンツが表示されない場合があり、クローラーがページの内容を確認しにくくなることがあります。
まとめ
SESエンジニアとして働いていると、プロジェクトによって使用する技術が大きく変わります。Reactを使った経験があっても、実際のプロジェクトではNext.jsが採用されていることがあります。
Next.jsはReactをベースにしているため、Reactの経験があれば学びやすい部分もあります。そのため、Reactを経験したエンジニアにとっては、次に触れてみるフレームワークの一つとして知っておくとよいでしょう。
