Next.jsは、堅牢なプロジェクトを支えるReactフレームワークとして名高く、Next.jsを使えば、大規模なエンタープライズ対応のアプリケーションを素早く構築し、本番環境にデプロイすることができます。

Next.jsには、アプリケーションをゼロから作り上げ本番環境まで到達する機能が豊富に備わっており、学習もしやすい構造になっています。

Next.jsは、Facebook提供のReactライブラリとcreate-react-appパッケージを拡張した代物で、柔軟で使いやすく、本番環境でフル活用できる選択肢です。

今回は、Next.jsについて、人気を博している理由に迫りながら、Next.jsを使用したさまざまなアプリケーションをご紹介します。さらに、Next.jsの特徴を解説し、Next.jsアプリケーションの基本的な構築方法にも触れたいと思います。

Next.jsとは

Next.jsはReactのフレームワークです。このフレームワークを使って、素早くSEOに強く、ユーザーフレンドリーな静的ウェブサイトやウェブアプリケーションを構築できます。Next.jsは、本番環境での公開に必要なすべての機能を備えたアプリケーション構築の選択肢として、優れた開発者体験を提供することで知られています。

静的レンダリングとサーバーレンダリングのハイブリッド、TypeScriptのサポート、スマートバンドル、ルートプリフェッチなどがあり、面倒な設定は必要ありません。

Next.jsが選ばれている理由

まずはじめに、Next.jsの人気の理由に迫りましょう。Next.jsで構築できるさまざまなアプリケーションについてもご紹介します。

画像最適化

Next.jsは、インスタントビルドでの自動画像最適化に対応しています。画像の最適化は、Next.jsにあらかじめ組み込まれている欠かすことのできない機能です。通常、画像の管理と最適化には多くの設定が必要であり、手作業でこれをこなすには多くの手間がかかるものです。

国際化（多言語化）

Next.jsは、国際化の面でも強さを発揮します。エンタープライズアプリケーションの開発後には、世界中のさまざまな言語に翻訳して事業展開することができます。簡単な設定で多言語対応ができるため、Next.jsは国際的プロジェクトに有用です。

分析

Next.jsには分析ダッシュボードが付随します。これを使って、正確な訪問者データやページのインサイトを素早く確認できます。余分なコーディングや設定をすることなく、分析データをチェックすることで訪問者やプロジェクトについての理解が深まります。

Next.jsのダッシュボード（ユーザーのパフォーマンスとエクスペリエンススコアがリアルタイムで表示される）
リアルタイムのユーザーパフォーマンスとエクスペリエンススコア（Next.jsダッシュボードより）

面倒な設定なし

Next.jsでは、ホットリフレッシュで自動的にコンパイルとビルドが行われます。

従来のフロントエンドアプリケーションではホットリフレッシュや自動リフレッシュを実現する際には、多くのハードルが介在するものでした。ライブラリを選択しインストールを行い、各ライブラリが正しく動作するように設定を行うのが一般的な流れでした。Next.jsでは、インストールや設定を一切することなく、すぐにホットリフレッシュを実行し、この問題を回避することができます。

ビルド済みのSSR、SSG、CSRサポート

Next.jsは、1つのアプリケーションでサーバーサイドレンダリング、静的生成、クライアントサイドレンダリングをサポートしています。構築するアプリケーションのタイプや、アプリケーションをどのようにコンパイルするかは、状況に合わせて決定できます。

サーバーサイドレンダリングにより、Next.jsは大規模なSEO指向のプロダクション対応アプリケーションに適しており、これの設定も簡単に行えます。

Next.jsを使ったアプリケーション

Next.jsで開発されたアプリケーションの例として、GitHub、Uber、Netflixなど名だたるフォーチュン500企業に選ばれています。

Next.jsで構築されたアプリケーショントップ5を以下にご紹介します。

TikTok

TikTokの公式サイト
TikTokの公式サイト

TikTokは短編の動画を気軽にアップロードできる視覚的SNSアプリケーションです。毎日数百万人という膨大な数のユーザーが利用しています。

TikTokのウェブページはNext.jsで開発されており、最適化を施すことでアプリユーザーによるアクセスを滑らかにさばいています。

Hashnode

Hashnodeの公式サイト
Hashnodeの公式サイト

Hashnodeは開発者の間で利用されている無料のオンラインブログプラットフォームで、Next.jsを使って構築されています。Hashnodeは数百万人のユーザーを記録しています。

Twitch

Twitchの公式サイト
Twitchの公式サイト

Twitchは、チャットでの交流を行なったり、さまざまなタイプのコンテンツやエンターテイメントを楽しんだりすることのできるオンラインソーシャルプラットフォームです。Next.jsがこの世界的サービスを支えています。

Hulu

Huluの公式サイト
Huluの公式サイト

HuluはNetflixのライバルにあたるストリーミングプラットフォームで、映画やテレビ番組などをオンラインで見ることができます。ここでもNext.jsが活用されています。

Binance

Binanceの公式サイト
Binanceの公式サイト

Binanceは、ニュースや価格情報などを発信する人気の仮想通貨ポータルサイトです。毎日の利用者数は数百万人と言われています。BinanceでもNext.jsが採用されています。

Next.jsを利用する企業やウェブサイトついてさらに詳しい情報は、Next.jsの公式ショーケースページをご覧ください。

構築できるもの

Next.jsでは、その種類に制限されることなくあらゆるアプリケーションを開発することができます。Next.jsを使ってアプリケーションを開発することで、面倒な設定をすることなくあらゆるNext.jsの機能をすぐに活用できます。

Next.jsで開発できるアプリケーションの種類は例えば以下の通りです。

  • MVP（注釈：試験的に開発する最低限の製品やサイト）
  • Jamstackサイト
  • ウェブポータル
  • シングルページサイト
  • 静的サイト
  • SaaS製品
  • EC（オンラインストア）
  • 管理画面/ダッシュボード
  • 複雑かつ負荷の高いウェブアプリケーション
  • インタラクティブなユーザーインターフェース

Next.jsの特徴

続いては、Next.jsの特徴と、Next.jsをプロジェクトに利用することで得られる具体的なメリットについてご説明します。

ルーティング

ルーティングはNext.jsを支える重要な機能のひとつです。Next.jsでは、pagesフォルダに基づいたファイルベースのルーティングシステムを使って、アプリケーションのルーティングが構造化されます。pagesフォルダ内に作成されたすべてのファイルとフォルダが、自動でNext.jsのルーティングに変換される仕様です。

Next.jsのルーティングシステムは以下にご紹介する3つのタイプに分かれます。

indexのルート

pagesフォルダには自動でindex.jsが作成され、これがホームページのルート「/」になります。また、任意のフォルダにあるすべてのルートのindex.jsページを定義することもできます。例えば、pages/profiles/index.jsを定義すると、自動的に/profilesページに紐付けられます。

例えば、以下の通りです。

- pages
  - index.js
  - profile
    - index.js
    - [user].js

上記のページ構造が、フォルダとファイルをURL構造に整理してくれます。例えば「/」＝pages/index.js、/profile/＝pages/profile/index.js、/profile/user＝pages/profile/user.jsといった具合です。

ネストしたルート

親ルートの中に作成することでルートのネストを行うことができます。入れ子状にルートを作成するには、pagesフォルダ内に親ルート/フォルダを作成し、その中にフォルダかファイルを追加します。

例えば、以下の通りです。

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

上のコードでは、user.jsとindex.jsファイルがdashboardという親ルートにネストされています。

動的ルート

動的ルートは不定の情報を扱うのに有用です。APIコールによって生成されるか、URLにIDもしくはスラッグを割り当てます。

Next.jsで動的ルートを作成するには、ファイル名またはディレクトリ名を角括弧で（[id].jsといったように）囲みます。ファイル名やディレクトリ名は任意ですが、動的にするには角括弧[]が必要です。

以下の例をご覧ください。

- pages
  - dashboard
    - [user].js
        - profile

上のスクリプトでは、[user].jsの部分が動的になっています。実際のプロフィールページには、/dashboard/2/profileや/dashboard/johndoe/profileでアクセスします。

Next.jsの公式ドキュメントでは高度なルーティングシステムの活用方法が紹介されています。

静的ファイル配信

Next.jsでは、アイコン、自己ホスティング型フォント、画像などの静的ファイルやアセットの提供は、静的アセットの唯一の格納場所であるpublicフォルダを通じて行われます。

Next.jsのドキュメントで注意のあるように、publicフォルダ名は変更してはなりません。Next.jsの設定をそのまま使うだけでpublicフォルダを介し静的アセットを簡単に配信できます。

プリレンダリング

Next.jsの大きな特徴のひとつがプリレンダリングです。Next.jsは、各ページのHTMLをあらかじめ生成し、ハイドレーションと呼ばれる処理を通じて、実行に必要な最小限のJavaScriptとともにページを用意します。

Next.jsのプリレンダリングには2つの種類があります。

  1. サーバーサイドレンダリング（SSR）
  2. 静的生成（SG）

SGとSSRの決定的な違いは、データの取得方法です。SGでは、ビルド時にフェッチしたデータが複数のリクエストで繰り返し利用されます。この方法ではキャッシュによる高速化が期待できます。一方でSSRでは、リクエストごとにデータがフェッチされます。

絶対パスインポート

Next.js 9.4から絶対パスインポートが導入され、長いディレクトリを記述するかたちでコンポーネントをインポートする必要がなくなりました。

たとえば、次のようなコンポーネントをインポートする必要はありません。

import InputField from "../../../../../../components/general/forms/inputfield"

代わりに次のようなスタイルでコンポーネントをインポートできます。

import InputField from "components/general/forms/inputfield";

ページのリンク

Next.jsでは、ページ間の移動にnext/linkが利用できます。Linkコンポーネントをインポートすることでこれを活用していきます。

pagesフォルダに以下のページ構造がありページ間をリンクしたいと仮定します。

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

そんな場合には、以下のスクリプトを使ってページをリンクすることができます。

import Link from "next/link";

export default function Users({users}) {
  return (
    <div>
      <Link href="/">ホーム</Link>
      <Link href="/profile">プロフィール</Link>
      <Link href="/settings">設定</Link>
      <Link href="/users">ユーザー</Link>
      <Link href="/users/bob">ボブのプロフィール</Link>
    </div>
  )
}

スタイリング

Next.jsでは、プロジェクトに必要なスタイルを自由に作成できます。デフォルトでは、Next.jsにはグローバルCSS、CSSモジュール、style-jsxの3種類のスタイルが用意されています。

Next.jsの課題

Next.jsにも課題があり、プロジェクトで使う前に把握しておくことをおすすめします。このセクションでは、Next.jsの課題についてご紹介します。

開発コストとメンテナンスコスト

Next.jsは、柔軟性が高い分、開発とメンテナンスにコストがかかります。アプリケーションを調整したり保守したりするには、Next.js専任の開発者とフロントエンド開発者が必要になり、これにはコストがかかる可能性があります。

組み込みステート管理機能の欠如

Next.jsはステート管理をサポートしていません。ステート（state）の管理が必要な場合には、Reactと同じようにインストールして使う必要があります。

プラグインが少ない

Next.jsには簡単に使えるプラグインがあまりありません。

Next.jsアプリの作り方

こちらのセクションでは、Next.jsの実用的な使い方と、Nuxt.jsアプリケーションの構築方法についてご紹介します。Next.jsアプリケーションを開発する上で欠かせない概念について理解を深めていきましょう。

Next.jsアプリケーションの構築

Next.jsプロジェクトは簡単に作成することができます。さまざまな方法がありますが、推奨されているのはCLIを使う方法です。

CLIを用いてNext.jsアプリケーションを作成するには、npxがインストールされているか（npxはnpm 5.2.0以降デフォルトで同梱されています）、npm v6.1またはyarnがインストールされていることを確認してください。

次に、Next.jsプロジェクトを配置したいフォルダで次のコマンドを実行します。

npx create-next-app
// 指示に従ってNext.jsプロジェクトを作成する
cd <project-name>
npm run dev

<project-name>を実際のプロジェクト名に置き換えてください。そして、プロジェクトに必要なさまざまなページやコンポーネントの追加を開始します。

Next.jsの要素

Next.jsプロジェクトを作成すると、さまざまな要素、ページ、フォルダ構造があることに気づくはずです。Next.jsの要素のいくつかを以下に示します。

フォルダ構造

CLIからNext.jsプロジェクトを作成すると、無駄のないフォルダツリー構造のNext.jsアプリが表示されます。このデフォルトのフォルダ構造は、Next.jsアプリが機能するための最低限のものです。実際のプロジェクトのビルドに着手すると、より多くのフォルダとファイルを扱うことになります。

Next.js固有のフォルダが、pages、public、stylesです。これらは、特別な調整を行う予定がない限り、名前を変更しないでください。

Next.jsプロジェクトのデフォルトのフォルダ構造は以下のようになります。

# その他のファイル、フォルダ、.gitignore、package.jsonなど
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Pages

PagesはNext固有のフォルダのひとつで、Next.jsのPagesについて知っておくべきことを簡単にご紹介します。

PagesはReactコンポーネントであり、pagesフォルダ内の各ファイルはウェブページであり、各ウェブページは実質的にReactコンポーネントになります。pagesフォルダの中にReactコンポーネントがあり、その結果ウェブページのURLとして表示されます。

// 場所：/pages/index.js
//  基本的なReactコンポーネント
export default Index() {
  return <h1>ホーム画面へようこそ</h1>
}

Next.jsには、_app.jsや_document.jsなど、アンダースコアを先頭に配したページがあらかじめ作成されています。Next.jsは_app.jsページコンポーネントを使用してページを初期化します。_app.jsページコンポーネントはpagesフォルダ内に存在し、_document.jsページコンポーネントはアプリケーションの<html>と<body>タグを拡張する役割を果たします。

このフレームワークでは、ページに基づいたファイルベースのルーティングシステムが採用されており、各ページがファイル名に基づいて自動的にルートになります。たとえば、pages/userにあるページは/userに、pages/index.jsは「/」に配置されます。

まとめ

Next.jsは、その機能、ツール、構成によって、アプリケーションの構築に伴う手間を簡素化するよう設計されています。Reactを使用してエンタープライズアプリケーションを構築する際には、Next.jsが優れた選択肢になることでしょう。

今回は、このフレームワークのさまざまな機能に迫り、アプリケーション開発にNext.jsの活用をおすすめする理由をご紹介しました。まだNext.jsを試したことがない方でも、その魅力をご理解いただけたはずです。

これを使ってどんなアプリケーションを開発する予定でしょうか。コメント欄でお聞かせください。