Next.jsは、Reactをベースにしたオープンソースのフロントエンドフレームワークで、ウェブアプリケーションやウェブサイトを簡単かつ効率的に構築できるツールです。開発元はVercelで、Reactの機能を強化し、サーバーサイドレンダリングや静的サイト生成などのモダンなウェブ開発機能を提供しています。
Next.jsの特徴
1. サーバーサイドレンダリング（SSR）
- ページをリクエストごとにサーバーでレンダリングし、HTMLをクライアントに送信。
- SEOや初期読み込みのパフォーマンスに優れている。
2. 静的サイト生成（SSG）
- ビルド時に静的HTMLを生成し、サーバーやCDN経由で提供。
- ページの読み込み速度が高速で、トラフィックの多いサイトにも適している。
3. インクリメンタル静的再生成（ISR）
- 静的ページを特定の間隔で再生成し、最新のデータを提供。
- 静的と動的の利点を組み合わせた機能。
4. フルスタック対応
- APIルートを利用してサーバーサイドのロジックを構築可能。
- フロントエンドとバックエンドを一体化したアプリケーションを開発できる。
5. ルーティング機能
- ファイルシステムに基づいたシンプルなルーティング。
pagesディレクトリにファイルを作成するだけでURLが生成される。
6. Image最適化
- 内蔵の
next/imageコンポーネントを利用して、画像の遅延読み込みやリサイズ、フォーマット変換（例: WebP）を自動化。
7. ホットリローディング
- 開発中にコードを変更すると即座に反映される開発者向けの機能。
8. TypeScriptサポート
- TypeScriptをネイティブにサポートしており、型安全な開発が可能。
Next.jsの使用例
1. コーポレートサイト
- SEOとパフォーマンスが重要な企業のウェブサイトに適している。
2. ブログやポートフォリオ
- 静的サイト生成（SSG）を利用して、高速でシンプルな構造を構築可能。
3. eコマースサイト
- SSRやISRを活用し、最新のデータを提供しつつSEOを最適化。
4. ダッシュボードやアプリケーション
- APIルートやフルスタック機能を利用して、複雑なデータ操作が必要なプロジェクトに活用。
Next.jsとReactの違い
| 項目 | React | Next.js |
|---|---|---|
| 用途 | UIライブラリ（ビルドツールが必要） | フルフレームワーク（SSR, SSG, ISRなどの構築済み機能を提供） |
| ルーティング | 開発者が設定を作成する必要がある | ファイルシステムに基づく自動ルーティング |
| サーバーサイド機能 | 提供されていない | SSR, APIルート, ISRなどのサーバーサイド機能を提供 |
| 設定 | 自由度が高いが手動設定が必要 | 最小限の設定で即座にプロジェクトを開始可能 |
Next.jsの利点
- パフォーマンス最適化
- SSGやSSRを活用して、高速なウェブ体験を提供。
- SEOに強い
- サーバーサイドレンダリングで検索エンジン向けに最適化されたHTMLを提供。
- 拡張性
- フロントエンドとバックエンドを統合し、一貫した開発体験を提供。
- 簡単なスタート
- テンプレートや設定が用意されており、すぐに開発を始められる。
サンプルアプリケーションの作成方法（Next.js チュートリアル）
pnpm（npmパッケージマネージャー）をインストールします。npm は Node.js に標準で付属しています。
npm install -g pnpmプロジェクトを保存したいフォルダに移動し、次のコマンドを実行します。
例）ホームディレクトリにwslフォルダを作成して移動する（フォルダ名は任意です）
mkdir ~/wsl
cd ~/wslサンプルアプリケーションを作成します。
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpmコマンド解説
| 部分 | 解説 |
|---|---|
npx | Node.js 公式の実行ツールで、ローカルまたはリモートのnpmパッケージからコマンドを実行 |
create-next-app@latest | 最新の create-next-app を使って Next.js プロジェクトを作成 |
nextjs-dashboard | 作成されるプロジェクトのフォルダ名（例：/nextjs-dashboard/） |
--example "https://github.com/.../starter-example" | 特定のテンプレート（GitHubリポジトリ）を使用して作成するオプション。今回は「Dashboard Starter Example」 |
--use-pnpm | 依存関係のインストールに pnpm を使用する（npm や yarn ではなく） |
プロジェクトフォルダに移動します。
cd nextjs-dashboardプロジェクトのパッケージをインストール
pnpm i| 処理内容 | 説明 |
|---|---|
package.json を読む | プロジェクトに必要な依存パッケージを確認します。 |
| パッケージをインストール | まだ未インストールのパッケージがあれば、node_modules/ にインストールされます。 |
.pnpm キャッシュを活用 | pnpm は重複を避けて効率的にキャッシュ管理します（同じバージョンのパッケージは再利用）。 |
pnpm-lock.yaml を作成・更新 | インストールされたバージョンをロックして再現性のある環境を構築します。 |
pnpm dev開発サーバーを起動します
pnpm devhttp://localhost:3000を開きます。以下のような画面が表示されれば起動が完了です。
スターターサンプルを使用して Next.js アプリケーションを作成し、開発サーバーを実行することができました。
参考
ファイルの保存先
- Windows および Linux ファイル システム間での作業
https://learn.microsoft.com/ja-jp/windows/wsl/filesystems - Working across Windows and Linux file systems
https://learn.microsoft.com/en-us/windows/wsl/filesystems
ファイルの保存先の推奨例：
ファイルをWSLファイルシステムに保存してください。Windowsコマンドライン（PowerShell、コマンドプロンプト）で作業している場合は、ファイルをWindowsファイルシステムに保存してください。たとえば、WSL プロジェクト ファイルを保存する場合は次のようになります。
引用元：https://learn.microsoft.com/en-us/windows/wsl/filesystems
・Linux ファイル システムのルート ディレクトリを使用します。/home/<user name>/Project
・Windowsファイルシステムのルートディレクトリではない:/mnt/c/Users/<user name>/Project$またはC:\Users\<user name>\Project
Windows エクスプローラーで現在使用可能な Linux ディストリビューションを表示する
アドレス バーに次のコマンドを入力します。
\\wsl$
例）ホームディレクトリに「wsl」フォルダを作成して「nextjs-dashboard」アプリを作成した場合
\\wsl.localhost\Ubuntu\home\＜アカウント＞\wsl\nextjs-dashboardサンプルアプリケーションの作成方法（テンプレート「create-next-app」）
プロジェクトを保存したいフォルダに移動し、次のコマンドを実行します。
例）ホームディレクトリにwslフォルダを作成して移動する（フォルダ名は任意です）
mkdir ~/wsl
cd ~/wslNext.js プロジェクトを新規作成するためのコマンドを実行します。
今回はデフォルトのサンプルテンプレート「create-next-app」を使ってアプリを作成します。
npx create-next-app@latest my-app
cd my-app
npm run dev詳細：
npxは、Node.js 公式の実行ツールで、ローカルまたはリモートのnpmパッケージからコマンドを実行します。
参考：https://docs.npmjs.com/cli/v11/commands/npxcreate-next-appは Next.js のプロジェクト初期化テンプレート。
参考：https://nextjs.org/docs/app/api-reference/cli/create-next-app@latestは、最新版のテンプレートを使うという意味。my-appは、作成するフォルダ名（あなたのプロジェクト名になります）。
ブラウザで http://localhost:3000 にアクセスして次のような画面が表示されたら成功 です。
＊複数起動している場合、ポート番号が変更になる場合があります。
Next.js のテンプレート
その他のテンプレートについては、こちらからアクセスできます。
- Next.js starter templates and themes
https://vercel.com/templates/next.js
Next.jsは、モダンウェブ開発の課題を解決するための強力なフレームワークで、個人開発から大規模プロジェクトまで幅広く利用されています。
関連記事
Node.jsについては、こちらで記事にしています。
npmについては、こちらで記事にしています。
App Routerについては、こちらで記事にしています。
公式サイトとドキュメント
- Next.js公式サイト
https://nextjs.org - Next.js公式ドキュメント
https://nextjs.org/docs - Next.jsを学ぶ
https://nextjs.org/learn/dashboard-app - Reactの基礎を学ぶ
https://nextjs.org/learn/react-foundations - GitHub Next.js
ライセンス：MIT license
https://github.com/vercel/next.js - Next.js starter templates and themes
https://vercel.com/templates/next.js
コメント
コメント一覧 （1件）
[…] […]