Next.jsの入門情報！概要から使い方・学習方法を解説

Next.jsの入門情報

Next.jsはReactのフレームワークとして、モバイルアプリケーションなどのウェブアプリケーション開発に用いられます。JavaScriptの知識に加えて、関連知識が必要となります。ここでは、はじめてNext.jsを学ぶ方に概要や使い方、学習方法などをまとめて解説していきます。

【参考】：Next.js: The React Framework for the Web

Next.jsは、オープンソースのウェブアプリケーションフレームワークです。Node.js上に構築されています。これまでのクライアントアプリケーションのReactを拡張し、サーバでレンダリングアプリケーションにも対応します。

そのため、Reactのフレームワークであり、サーバサイドJavaScriptのレンダリング、静的サイトの生成などの機能を追加したものと表すことができます。

【参考】：Next.js: The React Framework for the Web

フレームワークとは？プログラミング言語ごとに代表的なものを解説

Reactとは、モバイルアプリケーションなどで使用するユーザインターフェースを構築するJavaScriptライブラリを指します。Meta社とコミュニティによって維持・開発されています。

Reactは、ウェブアプリケーションのライブラリに位置付けられ、フレームワークとしてはNext.jsやRemixのようなReactをベースとするフレームワークを推奨しています。

【参考】：React 【参考】：Remix

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

Node.jsとは、Googleが開発するV8 JavaScriptエンジンで動作するJavaScript実行環境を表します。非同期イベントで駆動するJavaScriptのランタイム環境で、サーバサイドJavaScript環境を実現します。スケーラブルなネットワーク・アプリケーションを構築するために2009年に設計・開発されました。

Next.jsでは、サーバサイドJavaScriptにも対応するため、Node.jsを組み合わせる高度なアプリケーション開発が可能で、Reactもこの組み合わせを推奨しています。

【参考】：Node.js

Node.jsとは？JavaScriptとの違いや使い所を解説

Next.jsとReactの関係は、ReactがJavaScriptライブラリ自体で、Next.jsはReactのフレームワークです。Reactのアプリケーションをフルスタック実装する際には、Next.jsが有効でしょう。

Next.jsとNode.jsの関係は、Node.jsがサーバサイドのJavaScriptを構築し、Next.jsがNode.jsを使用して、クライアントとサーバ全体のアプリケーション開発を行うものです。そのため、Next.jsにはNode.jsが必要であり、導入時に設定し使用します。

Node.js入門！メリットやインストール方法・学習方法を解説

Next.jsの最新版は、2023年10月26日にリリースしたNext.js 14です。主要な機能強化は以下の通りです。

・Turbopack RustエンジンであるTurbopack（ターボパック）のインテグレーションテストが進み、App & Pages Routerで5,000のテストが完了しました。

その結果、アプリケーションではローカルサーバの起動が53%高速化し、高速リフレッシュ機能によりコード更新の94%が高速化されたことが確認できました。次期リリースでは安定版に移行する予定です。

・Server Actions Server Actions（サーバアクション）は安定版で、フォームやFormData Web APIといったWebの基本をベースに構築され、プログレッシブ・エンハンスメントに活用できます。キャッシュや再検証、リダイレクトなどに用いることができます。

フォームでは、ネイティブに動作しユーザエクスペリエンスを向上させることができます。

・Partial Prerendering Partial Prerendering（部分的なプリレンダリング）はプレビュー版です。 高速な初期静的レスポンス とストリーミング動的コンテンツを実現します。コンパイラの最適化が施されています。

【参考】：Next.js 14 【参考】：Turbopack

Next.jsの使い方

Next.jsを使うには、事前にNext.jsを導入しておきます。サポートされるブラウザは、Chrome 64以降、Edge 79以降、Firefox 67以降、Opera 51以降、Safari 12以降です。主要ブラウザに対応しています。

使い方は、JSXの記法でコーディングするだけですので、フォルダ構造を理解できたらコード開発に進むことができます。最初は、慣れるためにアプリケーション開発のサンプルを確認すると良いでしょう。

【参考】：Next.js Docs: Introduction 【参考】：Next.js Docs: Supported Browsers 【参考】：Learn Next.js: dashboard-app

Next.jsは、macOS、Windows、Linuxでサポートされます。Next.jsでは、Node.js 18.17以降が必要です。あらかじめNode.jsをインストールしておき、Next.jsをインストールします。WindowsはWSL2で動作しますので、WSLも事前にインストールしておきます。

【参考】：Next.js Docs: Getting Started: Installation 【参考】：Microsoft Learn: Windows 上の Next.js の概要 【参考】：Microsoft Learn: Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする 【参考】：Node.js

Next.jsのインストールは、create-next-appを使って”npx create-next-app”のように行います。プロジェクトのフォルダを作成し、そこで実行します。npxのほかyarnやpnpm、bunxなどでも同様です。Next.jsのインストールが完了したら、”npm run dev”で開発インスタンスを起動します。

実行の準備ができると、ウェブブラウザでは”http://localhost:3000”からNext.jsを起動します。最初に表示される画面は、”app/page.tsx”あるいは”pages/index.tsx”を編集し、更新することもできます。

【参考】：Next.js Docs: Getting Started: Installation 【参考】：Next.js Docs: create-next-app 【参考】：Microsoft Learn: Windows 上の Next.js の概要

Next.jsのプロジェクトは、トップレベルに4つのフォルダが格納されます。”app”は「App Router」、”pages”は「Pages Router」、”public”は静的な情報、”src”は追加のアプリケーションソースが格納されています。

「App Router」は、最新の画面遷移（ルーティング）を行うフレームワーク部分でReactの最新機能を取り入れたものです。「Pages Router」はNext.js 13まで使用されていたルーティングモジュールで、互換性維持のために提供されます。最新のアプリケーション開発では、「App Router」が推奨されます。

【参考】：Next.js Docs: Getting Started: Next.js Project Structure 【参考】：Next.js Docs: App Router 【参考】：Next.js Docs: Pages Router

Next.jsの学習方法

Next.jsは、ユーザインターフェースの開発フレームワークですので、ドキュメントや動画などいくつかの学習方法があります。最初は、公式サイトの入門ガイドやドキュメントが有効です。

しかしながら、英語での情報提供は日本人にとっては誰でも簡単に進められるものとは言えないのも事実です。最初はそれぞれを見比べてから少しづつ理解を深めるといいでしょう。

Next.jsでは、利用者を増やすために入門ガイドの掲載を始めています。「Learn Next.js」は初心者を対象とした入門ガイドです。基礎的な項目を順に解説しています。全体像を把握したら個別のテーマ別のドキュメントに進むこともできます。

【参考】：Learn Next.js: Start building with Next.js

「Next.js Docs」は、リファレンス情報を掲載する公式ドキュメント公開サイトです。ある程度基本がわかる方は、「Next.js Docs」を使って項目やテーマに沿って知識を深めることが可能です。概要レベルに近い情報から、より専門的なないようがカバーされています。

【参考】：Next.js Docs: Introduction

公式サイトのドキュメントは、非公式ながら有志による日本語翻訳プロジェクトも進められています。最初の学習のきっかけとしては、日本語サイトを確認するのがいいでしょう。

【参考】：Next.js ドキュメント日本語翻訳サイト 【参考】：Next.js Docs: はじめに

Next.jsを用いたアプリケーション開発は慣れが必要なため、順に公式ドキュメントを理解するのがいいでしょう。Next.jsを用いたアプリケーション開発では、前提となる部分を最初に理解しておきましょう。

ルーティング（Routing）は画面遷移の考え方、レンダリング（Rendering）は作成コードのユーザインターフェースへの変換、データフェッチング（Data Fetching）はデータのアプリケーションでの使用方法、スタイリング（Styling）はアプリケーションレイアウトを学びます。

【参考】：Next.js Docs: Building Your Application 【参考】：Next.js Docs: Routing Fundamentals 【参考】：Next.js Docs: Rendering 【参考】：Next.js Docs: Data Fetching 【参考】：Next.js Docs: Styling

Next.jsでは、ドキュメント作成やサンプルコードなどで開発支援者がサポートしています。そのコミュニティは、知見を持っている技術者の集まりですので、不明点や問題を解決するために活用が可能です。

【参考】：Next.js Docs: Next.js Community 【参考】：GitHub: Next.js Discussion 【参考】：Reddit Next.js

Next.jsにおいても、SNSのX（旧ツイッター）やYouTubeなどで情報が公開されています。英語の配信ですのでその点は理解したうえで活用しましょう。

【参考】：Next.js Docs: Next.js Community 【参考】：X: Next.js 【参考】：YouTube: Vercel

Next.jsは関連知識の習得も必要

Next.jsは、ReactのフレームワークでありReactを理解しておくのが望ましいです。また、サーバサイドではNode.jsの知識があるといいでしょう。このようにJavaScriptやJSXのみならず、関連知識も重要です。

モバイル端末などの高機能化が進む中、最適なユーザインターフェース設計には、関連知識の習得も合わせて行うことをおすすめします。

JavaScriptの主要ライブラリ3選！学習方法についても解説

Reactの将来性はVue超え？できることやメリット・デメリットも解説