Next.jsの概要

Next.jsはReactベースのフレームワークです。ここでは、Next.jsの基本情報や人気度について説明します。

Next.jsの基本情報

Next.jsとは、米国のVercelによって開発されているReactベースのJavaSprictのフレームワークです。ファイルベースルーティングやサーバサイドレンダリング（SSR）などの機能を使用することができます。

Reactとの違い

Next.jsはReactをベースにしています。では、Reactとの違いは何でしょうか。

ReactはJavaSprictを用いたUIを構築するためのライブラリです。Next.js以外のフレームワーク（Ruby on RailsやDjangoなど）にも実装できます。一方、Next.jsはReactをベースにしたJavaScriptのフレームワークです。Webアプリの土台として実装を行います。

また、Reactがクライアントサイドレンダリングであるのに対して、Next.jsはサーバサイドレンダリングです。これにより、SEO対策が強化できたりページ表示を早くすることができます。

Nuxt.jsとの違い

Next.jsと類似のフレームワークとして、Nuxt.jsがあります。Next.jsがReactと組み合わせてしようするフレームワークであるのに対し、Nuxt.jsはVue.jsと組み合わせて利用します。 Nuxt.jsはNext.jsと同じようにサーバサイドレンダリングを利用できます。

Next.jsの特徴、強み

Next.jsについて説明しましたが、ここではNext.jsの特徴とできること、メリットデメリットを説明します。

Next.jsの特徴

Next.jsには、下記のような特徴があります。

SSR（サーバサイドレンダリング）/SSG（スタティックサイトジェネレーター）

Next.jsは、Reactのようにクライアントサイドでレンダリングする以外にも、サーバサイドでレンダリングするSSR、ビルド時にレンダリングするSSGなど柔軟に変更できます。これによりページ読み込み時のダウンロードファイルサイズを削減でき、高速なページ表示が可能です。

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

Next.jsでは「pages」フォルダが存在しており、pagesフォルダの配下にファイルをおくことで自動的にパスが生成されるようになっています。例えばpagesフォルダの配下にsampleファイルをおくと、「https://localhost/sample」というパスが自動で生成されます。

Next.jsでできること

次に、Next.jsでできることについて説明します。

サーバサイドの実装が可能

Reactの場合は、JavaSprictライブラリであるため別途サーバサイドの実装が必要ですが、Next.jsはサーバ機能を有しています。

ルーティングの自動生成

Next.jsは、先述した通りファイルベースルーティング機能により、pagesフォルダ配下にファイルをおくことで自動でルーティングが決まります。Ruby on Rails などのフレームワークではルーティングを自分で決め、フォルダを自分で作成しなければなりません。自動生成されることで煩雑になるリスクを防げます。

画像の最適化

Next.jsでは、Imageコンポーネントを利用することで以下のようなことが可能です。

<image src = “/test/image1.jpg”>

import Image from ‘next/image’
<Image 
src = “/test/image1.jpg”
height = {500}
width = {500}
/>

Next.jsのメリットとデメリット

ここでは、Next.jsのメリットとデメリットについて解説します。

メリット

Next.jsのメリットは、初期表示の読み込みが早いことです。クライアント側でレンダリングする場合は、表示速度はクライアント端末の処理能力に影響されてしまいます。一方、Next.jsはSSRを使用できるためあらかじめレンダリングされたコンテンツを返すことができる上、クライアント端末の処理能力に影響されることもありません。

また、クライアント側でHTMLを認識する方法ではクローラーが認識できないケースもあります。SSRでは、サーバー側で生成されたHTMLが返されるため、クローラーが認識しやすくSEOに強くなります。

デメリット

Next.jsのデメリットは、Reactを覚える必要がある点です。ReactはJavaScriptのライブラリです。Javascriptが初学者の場合や抵抗がある人はまずJavascriptから学習しなければならず、ラーニングコストが高くなります。

Next.jsの使い方

ここまではNext.jsの特徴について説明しましたが、ここでは使い方について説明します。

Next.jsでの開発手順

node.jsのインストール

Next.jsでReactプロジェクトを開発するためには、まずはNodeが必要です。そのため、Homebrewを用いてNodeをインストールします。
※Windowsの場合はWSL2を導入しLinux環境を構築した後にHomebrewをインストールをしましょう。

#brew install node

Next.jsのインストール

Nodeがインストールされたら、Next.jsを使うためにcreate-next-appをインストールしましょう。

#npm install -g create-next-app

#npx create-next-app test-app

開発サーバの起動

Next.jsのプロジェクトが作成できたら、開発サーバを起動しましょう。

#npm run dev

Next.jsと関連する知識やツール

ここではNext.jsで開発するために役立つ知識を紹介します。

React

Reactとは、Facebook社（現Meta社）が開発したJavascriptのライブラリです。ライブラリとは、「システムを作るための部品」のようなもので、利用することでさまざまな機能を使えるようになります。

Reactはフレームワークではなく、UIを構築するためのライブラリで、「Yahoo!」「Netflix」など多数の企業に採用されています。

Node.js

Node.jsは「サーバサイドのJavasprict実行環境」です。Node.jsによって、Javasprictでサーバの構築もでき、アプリケーションプログラムを動かすこともできます。また、コマンドでよく使用される「npm」はNode.jsのパッケージ管理ツールです。

パッケージとは、ライブラリやフレームワークのことで、Node.jsで使用したいライブラリがある場合はnpmを使ってインストールします。

クライアントサイドレンダリングとサーバサイドレンダリング

クライアントサイドレンダリング（CSR）は、ブラウザ側でHTML／CSSを生成する際にJavasprictが実行されます。初回のページの読み込みは遅くなりますが、ページ遷移は高速です。

対して、サーバサイドレンダリング（SSR）はサーバ側でHTML／CSSを生成します。SSR対応のサーバが必要ですが、初回のページの読み込みが早いほか、SEOに強いというメリットもあります。

まとめ