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

Next.jsの入門情報

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

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

Next.jsの概要

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

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

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

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

Reactとは

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

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

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

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

Node.jsとは

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

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

【参考】：Node.js

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

Next.jsとReactやNode.jsの関係

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 14の概要

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の動作環境

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のインストールと起動

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のプロジェクト構造

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