Lesson 1

Next.jsの概要

Lesson 1 Chapter 1

Next.jsとは

はじめに

本教材をご覧いただきありがとうございます。本教材では、Next.jsについて詳しく学んでいきます。しっかりと抑えるべき内容をチャプターごとにまとめています。本チャプターでは大まかにNext.jsの概要を理解することを目標とし、下記項目について学んでいきます。

昨今のフロンエンド開発

Next.jsの特徴

Vercelについて

どういったときにNext.jsを使用するのか？

Next.jsの採用例

昨今のフロントエンド開発

まず初めにフロントエンド開発で注目されているフレームワークについて見ていきましょう。下記は世界125か国のフロントエンドエンジニアに過去1年間(2022年)でどのフレームワークを使用したかをアンケートした結果です。

引用:state-of-frontend

アンケート結果ではReactの人気が最も高く、その次にReactのフレームワークであるNext.jsという状況です。このようにReact,Next.jsは世界のフロントエンド開発で高い人気を誇ることがわかります。次の「Next.jsの特徴」ではそんな人気であるNext.jsとは何なのかについて軽く触れていきましょう。

Next.jsの特徴

Next.jsはReactをベースにしたフロントエンドフレームワークです。Next.jsを使用することで、サーバ側でページを生成するサーバサイドレンダリング（SSR）ができるようになります。サーバサイドレンダリングを行い、クライアント側のページ生成処理を減らすことで、より高速なウェブページの表示が可能になります。ほかにもパフォーマンスや SEO、アプリ開発を効率化する機能が多く組み込まれているため、開発者は機能の実装に時間をとられずコーディングに集中することができます。 Next.jsは、2016年にVercel社によりバージョン1.0がリリースされ、現在も開発が継続されています。 Next.jsの開発にはGoogle社も協力しています。 Next.js は比較的歴史の浅いフレームワークですが、Reactよりも開発がスムーズに行えてユーザ体験 (UX) の向上にも役立つため、 React での Webアプリ開発において最も人気があり、フロントエンド開発の現場でも重宝されています。

次の「Vercelとは」ではNext.jsで作成したプロジェクトを簡単にデプロイできるVercelというサービスについて解説していきます。

Vercelとは

Vercelとは、Next.js を開発している Vercel Inc.が提供しているサーバレスプラットフォームです。 Vercelを利用して、Next.jsで作成したプロジェクトをGitHubなどのリポジトリと連携することで手軽にアプリケーションをデプロイすることが可能です。またSSL暗号化、キャッシュの無効化、圧縮による軽量化なども自動で行ってくれるため大変便利です。

個人的な非営利目的の使用であれば、クレジットカードの事前登録は不要で、無料で利用できます。詳細な料金はこちらに記載しております。

デプロイって？

デプロイとは、開発したアプリケーション（機能やサービス）をサーバ上に展開・配置して利用できるようにすることです。 Webアプリケーションであれば実行ファイルをWebサーバやアプリケーションサーバにアップロードして、その実行ファイルを実行することによりサーバ上でアプリケーションが動くようになり、ユーザーが利用できる状態になります。この一連の作業がデプロイです。

Next.jsを使うべき理由

Next.jsを使用するメリットはたくさんありますが、その中でも特に大きなメリットは「サーバサイドレンダリング」と「ルーティング」です。
サーバサイドレンダリングとルーティングについて詳しくは
チャプター「Next.jsとReactの違い」
チャプター「レンダリングの種類」
で解説しますのでこちらでは簡単に説明させていただきます。

Next.jsのサーバサイドレンダリング(SSR)

通常Reactのみで作成されたアプリはすべてのコンテンツをクライアント側のブラウザでレンダリングするため、ページ数が多いWebサイトでは初期ローディングにかかる時間が長くなってしまいます。
そこで、クライアント側でレンダリング(CSRと言う)していた部分をサーバサイドでレンダリングできるようにするのがSSRです。 Next.jsではページによってCSRとSSRを使い分けできるためとても便利な機能の一つとなっています。

Next.jsのルーティング

Next.jsのルーティングは、プロジェクトのディレクトリ構成に依存します。具体的にはpagesディレクトリというディレクトリにページを追加すればそれが実際にアプリパスとして使用でき他のファイルからもそのアプリパスで参照できるようになります。
Reactでもreact-routerというライブラリでルーティングを制御することはできますが、Next.jsのルーティング機能に比べればはるかに使い勝手は劣ります。ですので、Reactで開発するのであればSSRの要件がなくてもルーティングのことを考えるのであればNext.jsを採用する価値は十二分にあります。

また2019年のNext.js 9へのメジャーバージョンアップによりデフォルトでTypeScriptに対応したということもありこれからも根強くフロントエンド開発で使用されるフレームワークになると思われます。

Next.jsの採用例

Reactで開発する上でとても便利なNext.jsは有名企業でも多く採用されています。
ここで、Next.jsを使用して作成されているWebサイトをいくつか見てみましょう。

■Hatena (はてなブログ、はてなブックマークなどを運営する企業)

■LEGO (プラスチック製の組み立てブロック玩具のブランド・企業)

■Ferrari (イタリア、モデナマラネッロに本社を置く高級スポーツカーメーカー)

採用例は他にもNext.js公式サイトのShowcaseで確認できますので、是非ご覧になってみてください。

Lesson 1 Chapter 2

Next.jsとReact.jsの違い

Next.jsと他のフレームワークの関係

Next.jsがどのような位置づけかを理解しやすくするために、Reactとの違いをはじめ他のフレームワークやライブラリとの関係性について解説します。 Reactとはどう違うのか、Node.jsとどう関係しているのかなど、簡単に見てみましょう。

Reactとの違い

Next.jsと似た様な言葉の中にReactという言葉を耳にすると思います。
ここではそんなNext.jsとReactの違いを見ていきます。
Reactは、ユーザーインターフェイス（UI）を構築するためのJavaScriptライブラリで、アプリケーション全体を実行するためのサーバサイド機能を持っていません。したがってアプリケーションを公開するには、別途Webサーバを用意する必要があります。
Next.jsはReactベースのJavaScriptフレームワークであり、作成したアプリケーションをサーバ側で実行させる機能を提供しています。ですのでNext.jsはアプリケーションを実行するためのサーバサイド機能を持っており、別途Webサーバを用意する必要がありません。
まとめると、ReactはUIを構築するためのJavaScriptライブラリで、Next.jsはReact+アプリケーション公開用のサーバ機能を提供するフレームワークといった感じになります。

	Next.js	React
別途サーバが必要か	不要	必要
分類	アプリケーションフレームワーク	JavaScriptライブラリ

Nuxt.jsとの違い

Next.jsと似たような名前のNuxt.js（ナクストジェイエス）というフレームワークがあります。 Next.jsもNuxt.jsもSSRを可能にするJavaScriptフレームワークです。SSRが必要な際に導入するのが一般的です。大きな違いとしては、一般的にNext.jsがReactとペアであることに対し、Nuxt.jsはVue.jsと組み合わせて用いられることが多いです。 ReactアプリケーションをSSRする場合はNext.jsを使い、Vue.jsアプリケーションをSSRする場合はNuxt.jsを使う、と覚えておけば大丈夫でしょう。

Node.jsとの関係性

Next.jsは単体では動作できません。事前にNode.jsのインストールが必要になります。 Node.jsとは従来クライアント側で動作していたJavaScriptを、サーバ側でも動作できるようにするためのプラットフォームです。昨今ではNode.jsを利用したWeb開発・アプリ開発などが盛んになっており、Node.jsに対応したフレームワークやライブラリが数多く登場しています。そんなNode.js上でReact.jsを使用できるようにするのもNext.jsの役割です。

Next.jsのサーバ機能

Next.jsには前述した機能の他にたくさんのサーバ機能が備わっております。下の表で主な機能について見てみましょう。

機能	説明
画像の自動最適化	Next.jsに標準搭載されているnext/imageモジュールによるサーバ側で画像のサイズやクオリティを自動で最適化してくれる仕組み
file-system based Routing	pagesディレクトリのファイルを自動的にルーティング(下記で詳しく解説します)
API Routes	Next.jsはサーバ機能を有しているのでフロントエンドだけではなくバックエンドAPIとしての役割も持っています。通常React+バックエンドAPIで構築されたアプリケーションのバックエンドAPIは独立したサーバになっていますので各々の環境の通信速度に左右されますが、 Next.jsは同一ノード内でAPIを構築できるのでAPIへの通信速度を気にすることなく処理を記述できます。

上記が、Reactにはない機能のいくつか例です。他にもこのようなサーバ機能を有しているからこその便利な機能がたくさんあります。気になる機能があれば自分で使ってみるのもいいかもしれませんね。

Next.jsのルーティング機能

「Next.jsのサーバ機能」の表でも示した様にNext.jsを代表する機能の一つにファイルシステムルートが挙げられます。通常Reactのみで作成したアプリケーションはルーティングライブラリ等を使用してルーティングをする必要がありますが、 Next.jsではpagesディレクトリにJavaScriptファイル(XXX.js)を作成するのみで自動でルーティングが設定されます。
この機能をfile-system based Routingと言います。
ここでReactのルーティングライブラリreact-router-domでルーティング設定した場合と比較してみましょう。

Next.jsを使用せずreact-routerdomを使用したルーティング

app.js

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Hello React Router>
        <Route path="/">
          <Home />
        </Route>
    </BrowserRouter>
  );
}

react-router-domを使用したルーティングでは上記のようなコードをページを追加するたびに記載する必要があります。そのためページを大量に使用するアプリケーションでは記載する手間がかかりコードが見辛くなってしまいます。

Next.jsを使用した場合(File System Based Routing)

Next.jsでは上記で配置したファイルをLinkコンポーネントというコンポーネントを用いてルーティングを設定できます。ルーティングの手間だけでもNext.jsを使用するというくらい実装が簡単ですね。さてNext.jsを使用するとサーバサイドでレンダリングが可能ですがそのレンダリングについて次のチャプターで詳しく学んでいきましょう。

Lesson 1 Chapter 3

レンダリングの種類

レンダリングとは

本チャプターではNext.jsを学ぶ上では欠かせないレンダリングという仕組みについて学んでいきます。
通常WEBサイトを閲覧する際Webブラウザ上でURLを指定することで、そのURLに対応するデータをWEBサーバから取得してブラウザ画面に表示させています。簡単に解説するとこの時の「指定したデータをブラウザ画面に表示すること」を「レンダリング」と言います。
少しざっくりとした解説ですが、Yahooニュースを例にとってみていきましょう。
Yahooニュースでは毎日ニュース記事の部分等の表示が変わっていきます。この時WEBサーバでは変化しない部分をテンプレートHTMLとして保持しています。つまり、変更が多い部分のみ穴抜けのようになったHTMLが用意されているのです。

Yahooニュースでいうと、

・Yahooのロゴなどのヘッダー部分

・ニュースのカテゴリ欄

・ニュースの記事一覧(記事の見出しは変化するが、文字の大きさや色は変わらない)

他にもまだまだありますが、このような感じで変わらない部分をWEBサーバ側で準備しています。そして変わる部分はHTMLデータを作成して表示させる必要があります。この変わる部分のHTMLを動的に作成することをレンダリングと言います。

このレンダリングの方法は大きく分けて4種類あり以下のようになります。

SSR (Server Side Rendering)

CSR (Client Side Rendering)

SSG (Static Site Generator)

ISR (Incremental Static Regeneration)

それでは一つずつ見ていきましょう。

SSR (Server Side Rendering)

SSRはサーバ側で全てレンダリング処理を行う手法です。こちらはNext.jsのサーバ機能を提供しているからこそできるレンダリング手法です。当たり前ですが、サーバ側でレンダリングするためサーバ機能を持っていないReact単体ではできません。 SSRとよく対比されるレンダリング手法として後述するCSRがあります。 CSRではクライアント側のブラウザでJavaScriptを解釈しHTML,CSSに変換してページを表示します。この変換する作業の時間はクライアント側のデバイスのスペックにより大きく左右されます。 SSRではサーバ側から既にHTML,CSSに変換したものをダウンロードして表示する為クライアント側のデバイススペックに左右されず大幅な表示時間削減になります。

流れとしては、

・PCやスマホのリクエストを受け取る

・リクエストに応じたHTMLファイルをサーバ側で作成する

・完成したHTMLファイルをPCやスマホに返却する

・PCやスマホのブラウザ上で表示する。

という流れです。

メリット

初回アクセス時はCSRと比べてクライアント側での処理が少ないので表示が早い
→初回アクセス時の表示が早いと検索結果の上位に表示されやすくなる。(SEOに強くなる)

クライアント側の環境に左右されにくい。（サーバサイドでレンダリングするため、 CPUやメモリーが少ないスマホなどのデバイスでも操作性に影響が少ない。）

デメリット

SSRするためのNode.jsを実行出来るWebサーバが必要になる。

サーバ側の負荷が高い。（サーバのCPU負荷が増える。）

上記2つにより、ホスティングサーバの通信量による従量課金費用がかさんでしまう

CSRに比べていちいちデータをダウンロードする為SSRするページに遷移するたびにロード時間が入る。

SSRが使用できる主な技術

SSRが適しているサービスはコンテンツ更新頻度の高いサービスが適しているといえます。動画投稿サービスやSNSサービスが良い例です。
SSRが使用できる技術は下記のような感じです。

・Java(Spring Boot)

・Ruby on Rails

・PHP

・node.js(Nuxt.js.Next.js)

CSR (Client Side Rendering)

CSRはここ数年で確立した手法で、レンダリング処理を全てJS(JavaScript)を使用してWEBブラウザ上で行う手法です。
アプリケーション提供側でサーバのことをあまり気にせず開発できその為開発速度も早いことからReactが人気になった理由でもあります。 CSRで作成されたWebサイトをSPA(シングルページアプリケーション)と言ったりします。
初回アクセス時にページそのものが変更できる大きなJSプログラムをWEBサーバからダウンロードします。ダウンロードしたJSを使ってクライアントサイド（あなたのPCやスマホ）でHTMLを書き換えて、ページ遷移しているように見せます。

流れとしては、

・PCやスマホのリクエストを受け取る

・HTMLファイル描画のためのJSプログラムをまるごとPCやスマホに返却する

・PCやスマホ上で描画し直して画面を切り替える

という流れです。

メリット

一度読み込んだページはその後必要な部分のコンテンツのみを描画させるため画面全体が再描画されるストレスがなくなる。
→よってユーザには優れたUI/UXを提供出来る。

デメリット

初回アクセス時にWebサイトのデータをまとめて読み込むので、初回の表示まで時間がかかる。(SEOに弱くなる)

クライアントサイドのJavaScriptの処理が増えるので、CPUやメモリーが少ないスマホなどのデバイスでは、操作性が損なわれる可能性がある。

CSRが使用できる主な技術

CSRが適しているサービスは企業向けの管理サイトのようなユーザーが頻繁にページ遷移やコンテンツの操作するような滞在時間の長いサービスに適しているといえます。 CSRが使用できる技術は下記のような感じです。

・React

・Vue.js

・AngularJS

SSG (Static Site Generator)

Static Site GeneratorのStatic Siteとは静的サイトのことです。
動的サイトとは、前述のYahooニュースなど、WEBサイトの表示内容が頻繁に変わるようなサイトです。静的サイトとは、ブログの記事ページのようにコンテンツが変更されることのないサイトです。
SSGとは上記の静的サイトをサーバ側で全部先に作ってしまおうという手法です。
具体的にいえば個人ブログを例にあげると記事の数だけページ(HTML)を作るという考え方です。
前述のYahooニュースでは、これは不可能です。
YahooニュースををSSGで作成するとなると記事が何万何億とあるため、ページも何万何億となりファイルが多くなりすぎてサーバがパンクしてしまいます。
個人のブログサイトのようにページ数が割と少なめのサイトにとても最適です。
記事をサーバにデプロイをしてビルドをしてしまえばクライアント（PCやスマホ）側で表示するには
すでに完成しているHTMLをダウンロードするだけなので、アクセスは超高速で近年の主流にもなりつつあるサーバの公開方式です。

メリット

SSRよりもレスポンスが高速。

SEOに強い。

VercelがSSGでの開発を推奨している。

デメリット

ビルドしてしまうと更新があってもデプロイ後再度全てページをビルドし直さないと内容が更新されない。

ページの数やコンテンツの数が多くなるとビルド時間が長くなる。

前述したYahooニュースのような頻繁にデータ更新があるサイトには向かない。

SSGが使用できる主な技術

SSGが適しているサービスは前述したように更新頻度の少ないブログやコーポレートサイト等です。規模で言うと比較的に中規模向けWEBサイト開発に使用されます。

・Next.js

・Nuxt.js

SSRとSSGの違い

お気づきになった方もいらっしゃるかも知れませんがSSRとSSGはどちらもサーバ側でレンダリングする手法です。前述の通りSSG/SSRには、メリット/デメリットが存在しているため、利用用途に応じて適切に使い分ける必要があります。
実際にプログラムの動作がSSGとSSRでどう違うのか見てみましょう。プログラムの内容は、0〜99の乱数を作成し画面に表示するプログラムです。
まずSSGで動作しているのが以下のURLです。
https://sg-ssr-demo.vercel.app/sg nextjs-1-4
静的に生成されているため、乱数はビルド時に生成された数字が固定して表示されます。今回の場合は、32が表示されていますね。これはページをリロードしても、必ず同じ数字が表示されます。
一方SSRで動作しているのが以下のURLです。
https://sg-ssr-demo.vercel.app/ssr nextjs-1-5
こちらはアクセスのたびに、乱数を生成する処理が行われるため、人によって異なる数字が表示されます。ページをリロードするとまた新しい数字が表示されます。
今回は乱数を表示させる簡単なプログラムでしたが、なんとなく動作のイメージはつかめましたでしょうか？ SGの方がSSRより表示スピードが速いという点も、こちらのサンプルページで確認いただけたと思います。
Next.jsの大きな特徴として、一つのプロジェクトの中で、SGとSSRを混在して利用することができる、という点があります。実際のプロジェクトで考えると、例えばユーザーの認証状態によって出しわけが必要なページはSSR、共通のお知らせページはSGといった使い方が可能になります。

ISR (Incremental Static Regeneration)

ISRは少し難しいですが、インクリメンタル静的再生成という手法になります。
SSGには先ほど解説した通りデメリットがいくつかあります。

ページを生成する際にページ数が多いとビルドに時間がかかる。

1 度しかビルドしないので、再度すべてのページをビルドし直さないと内容が更新されない。

ISR はそんな SSG の欠点を補うもので、次の動作で解決しています。

クライアント側のアクセス時に初めてページが生成されるので初回ビルドが高速。

ISRでページ生成後も再度アクセスがあった際に自動的に次回以降の内容をビルドするので表示内容が更新される。

基本的にSSGの挙動と同じなのですが、上記のようなSSGにはない長所があるため
開発者側・クライアント側にとって非常に使い勝手が良いです。
現時点ではISRを使える技術でメジャーなのはチャプター1で紹介したホスティングサービス「Vercel」です。
そのためISRを使用する際はVercel依存になってしまうのでサイト改修等で脱Vercelになった場合は少し注意が必要です。

まとめ

Next.jsでは作成するページ毎にご紹介したレンダリング方法を自由に設定することができ、そのページにあった最適なWEBパフォーマンスを発揮できます。
今回ご紹介したレンダリング方法はReact.jsと差別化を図る上ですごく重要な知識になります。実際の実装方法についてはレッスン６「各レンダリング方式ごとのデータ取得方法」にて学んでいきます。次のレッスンではNext.jsを使用していく為の環境構築を行なっていきます。

Next.jsの概要

目次

Lesson 1 Chapter 1

Next.jsとは