Next.jsは、Reactベースの人気のあるウェブ開発フレームワークです。Next.js 14のリリースにより、開発プロセスを効率化し、アプリケーションのパフォーマンスを向上させる新機能と改善が導入されました。
このブログ記事では、Next.js の主要な側面に焦点を当て、新しいプロジェクト構造、App Router、そしてこれらの変更よるウェブアプリケーションの構築方法も探ります。
Next.js のインストール方法
Next.js を使い始めるには、以下の手順に従ってください。
- Node.jsがインストールされていることを確認します（バージョン18.17以降を推奨）。
- 新しいプロジェクトを作成するには、ターミナルで以下のコマンドを実行します：
npx create-next-app@latest my-next-app- プロンプトに従って、プロジェクトの設定を行います：
- TypeScriptを使用するかどうか
- ESLintを使用するかどうか
- Tailwind CSSを使用するかどうか
src/ディレクトリを使用するかどうか- App Routerを使用するかどうか（はい、を選択）
- カスタマイズされたaliasを追加するかどうか
- プロジェクトディレクトリに移動します。
cd my-next-app- 開発サーバーを起動します：
npm run devこれで、http://localhost:3000 でアプリケーションにアクセスできます。
新しいプロジェクト構造
Next.jsは、明確さと直感性を重視した新しいプロジェクト構造を導入しています。主要なコンポーネントを見てみましょう。
my-nextjs-project/
│
├── app/
│ ├── api/
│ ├── (routes)/
│ ├── layout.js
│ └── page.js
│
├── public/
├── components/
├── lib/
├── styles/
├── node_modules/
├── package.json
├── next.config.js
└── jsconfig.json (TypeScriptの場合は tsconfig.json)app/ ディレクトリ
Next.js 14プロジェクトの中心は app/ ディレクトリです。このフォルダは新しいApp Routerシステムの基盤であり、従来の pages/ ディレクトリに代わるものです。
- ファイルベースのルーティング:
app/ディレクトリの構造が直接アプリケーションのURLパスにマッピングされます。 - 特殊ファイル:
layout.js、page.js、loading.js、error.jsなどのファイルがアプリケーションの構造と動作を定義する特定の役割を持ちます。 - APIルート:
api/サブディレクトリでroute.jsファイルを使用してAPIエンドポイントを定義します。 - ルートグループ:
(auth)のような括弧で囲まれたフォルダを使用して、URL構造に影響を与えずにコードを整理できます。
その他の重要なディレクトリ
public/: 画像やフォントなどの静的アセットを格納します。components/: 再利用可能なReactコンポーネントを配置します。lib/: ユーティリティ関数や共有ロジックを含みます。styles/: グローバルスタイルやCSSモジュールを含むCSSファイルを格納します。
App Router：ゲームチェンジャー
Next.js 13で導入され、バージョン14でさらに洗練されたApp Routerは、ルーティングの扱い方に大きな変革をもたらしました。主な特徴は以下の通りです：
- 直感的なルーティング: ディレクトリ構造が直接URLパスに対応し、アプリケーションのルーティングを理解・管理しやすくなりました。
- ネストされたレイアウト:
layout.jsファイルを使用して、ネストされたレイアウトを簡単に作成できます。これにより、ページ構造のより細かな制御とコードの再利用が促進されます。 - デフォルトでサーバーコンポーネント:
app/ディレクトリ内のコンポーネントはデフォルトでサーバーコンポーネントとなり、パフォーマンスが向上し、機密性の高い操作をサーバー上で保持できます。 - 簡素化されたデータフェッチング: App Routerは、より直感的で効率的な新しいデータフェッチング方法を導入し、サーバーサイドとクライアントサイドのデータ管理の複雑さを軽減します。
- 高度なルーティングパターン: 並列ルートや割り込みルートなどの機能により、複雑なユーザーインターフェースやインタラクションを作成するための強力なツールが提供されます。
Next.js 14への移行
Next.js 14へのアップグレードを検討している場合、以下のヒントが移行をスムーズにするでしょう：
- App Routerから始める: まず、
pages/ディレクトリのコンテンツを新しいapp/構造に移動します。 - サーバーコンポーネントを段階的に採用: サーバーコンポーネントを適切な場所で活用しますが、必要に応じてクライアントコンポーネントも使用できることを覚えておきましょう。
- データフェッチングを更新: 新しいデータフェッチング方法に慣れ、既存のコードを徐々に更新していきます。
- 新機能を活用: ストリーミングやサスペンスバウンダリなどの機能を探索し、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させます。
Next.jsのバージョンを確認する方法
Next.jsのバージョンを確認することは、プロジェクトの管理や互換性の確保のために重要です。以下に、Next.jsのバージョンを確認するいくつかの方法を紹介します。
1. package.jsonファイルを確認する
プロジェクトのルートディレクトリにあるpackage.jsonファイルを開き、dependenciesまたはdevDependenciesセクションでnextのバージョンを確認します。
{
"dependencies": {
"next": "^14.0.0",
// 他の依存関係...
}
}2. npmコマンドを使用する
ターミナルで以下のコマンドを実行します。
npm list nextこのコマンドは、インストールされているNext.jsのバージョンを表示します。
3. Next.jsの内部関数を使用する
Next.jsアプリケーション内で、以下のコードを使用してバージョンを確認できます。
import next from 'next/package.json';
console.log(next.version);4. ブラウザのコンソールで確認する
Next.jsアプリケーションを実行中に、ブラウザの開発者ツール（DevTools）のコンソールで以下を入力します：
next.versionこれにより、現在実行中のNext.jsのバージョンが表示されます。
5. CLIコマンドを使用する（Next.js 9.3以降）
ターミナルで以下のコマンドを実行します：
npx next --versionこのコマンドは、インストールされているNext.jsのバージョンを直接表示します。
バージョンを定期的に確認し、最新のセキュリティアップデートや新機能を利用できるようにすることをお勧めします。また、プロジェクトのドキュメントやREADMEファイルに使用しているNext.jsのバージョンを記載しておくと、チームメンバーや将来の自分にとって有用な情報となります。
結論
Next.js 14の新しいプロジェクト構造とApp Routerシステムは、開発者により直感的で柔軟、そして強力なツールセットを提供し、最新のウェブアプリケーションの構築を可能にします。
