Next.js は、その強力な機能と直感的なデザインで React 開発に革命をもたらしました。 Next.js 13 のリリースにより、新しい App Router が中心的な役割を果たし、開発者にアプリケーションを構築するためのより柔軟で強力な方法を提供します。この包括的なガイドでは、App Router について詳しく説明し、その機能とベスト プラクティスを探ります。これらの概念を説明するために、カバー レター ジェネレーター プロジェクトという実際の例を使用します。

App Router について理解する

Next.js 13 の App Router は、React アプリケーションでのルーティングへのアプローチ方法におけるパラダイム シフトを表しています。以前の Pages Router とは異なり、App Router は、アプリケーション構造を精神的にモデル化する方法とより密接に一致するファイル システム ベースのアプローチを使用します。

App Router の主な利点:

1. 直感的なファイルベースのルーティング: ルートはアプリ ディレクトリ内のファイル構造によって定義されます。
2. パフォーマンスの向上: React サーバー コンポーネントの組み込みサポート。
3. 柔軟性の向上: レイアウト、ネストされたルーティングなどの実装が簡単になりました。
4. 組み込みの最適化: 自動コード分割とプリフェッチ。

App Router の使用を開始する

App Router を使用して新しい Next.js 13 プロジェクトをセットアップすることから始めましょう。ターミナルを開いて次を実行します:

npx create-next-app@latest my-app
cd my-app

プロンプトが表示されたら、「App Router を使用しますか?」で必ず「はい」を選択してください。

App Router を使用した基本的なルーティング

App Router では、各フォルダーがルート セグメントを表します。カバーレタージェネレーターの単純な構造を作成しましょう:

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

ここで、ルート アプリ フォルダー内の page.tsx はホーム ページを表します。カバーレター フォルダーとテンプレート フォルダーは、それぞれのページのルートを作成します。

app/page.tsx内:

export default function Home() {
  return 
Welcome to the Cover Letter Generator
;
}

app/カバーレター/page.tsx内:

export default function CoverLetter() {
  return 
Create Your Cover Letter
;
}

この構造により、ホームページには / に移動し、カバーレター作成ページには /cover-letter に移動できます。

レイアウトとネストされたルート

App Router の強力な機能の 1 つは、ネストされたレイアウトを作成する機能です。アプリケーションに共通のレイアウトを追加しましょう。

app/layout.tsx内:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

このレイアウトはアプリケーション内のすべてのページに適用され、一貫したナビゲーション構造が提供されます。

動的ルート

動的ルートは、パラメータに基づいてコンテンツを生成するアプリケーションにとって重要です。特定のカバーレターテンプレートを表示するための動的ルートを実装しましょう。

新しいファイルを作成します: app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return 
Template {params.id}
;
}

これで、/templates/1 または /templates/formal に移動すると、このコンポーネントがそれぞれの ID でレンダリングされます。

サーバーコンポーネントとデータフェッチ

Next.js 13 では React Server Components が導入され、サーバー上のデータをフェッチできるようになります。これをカバーレタージェネレーターに実装しましょう。

app/カバーレター/page.tsx内:

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    

      
Create Your Cover Letter
      

        {templates.map(template => (
          
{template.name}
        ))}
      
    
  );
}

このコンポーネントはサーバー上のデータを取得し、パフォーマンスと SEO を向上させます。

リンクとナビゲーション

クライアント側のナビゲーションには、Next.js の Link コンポーネントを使用します。 app/layout.tsx:
を更新します。

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

現実世界のアプリケーション: カバーレタージェネレーター

基本を説明したので、これらの概念が実際のプロジェクトにどのように適用されるかを見てみましょう。 GitHub の Resumate-NextJS プロジェクトは、Next.js で構築されたカバー レター ジェネレーターの優れた例です。

このプロジェクトの重要なポイント:

1. 構造化ルーティング: このプロジェクトでは明確なルーティング構造を使用し、異なるページとコンポーネント間で懸念事項を分離しています。

2. サーバーサイド レンダリング: Next.js の SSR 機能を利用して、パフォーマンスと SEO を向上させます。

3. API ルート: サーバー側ロジックの API ルートを実装し、フォーム送信とデータ処理の処理方法を示します。

4. スタイリング: Tailwind CSS を使用して、レスポンシブでクリーンな UI デザインを実現します。

5. 状態管理: コンポーネント間でアプリケーションの状態を管理するためのコンテキスト API を実装します。

高度な概念

App Router に慣れてきたら、次の高度な概念を検討してください:

1. 並列ルート: 同じレイアウトで複数のページをレンダリングします。
2. ルートのインターセプト: 特定のシナリオのルーティング動作をカスタマイズします。
3. ルート ハンドラー: App Router 構造内に API エンドポイントを作成します。
4. ミドルウェア: カスタムのサーバー側ロジックをルートに追加します。

ベストプラクティスとヒント

1. サーバー コンポーネントの活用: データの取得や大量の計算に使用します。
2. 画像の最適化: 自動最適化には Next.js 画像コンポーネントを使用します。
3. プログレッシブ拡張機能の実装: アクセシビリティを向上させるために、アプリが JavaScript なしで動作することを確認します。
4. TypeScript を使用する: 開発者のエクスペリエンスとコードの品質を向上させるため。
5. 定期的な更新: 最新の機能と最適化を活用するために、Next.js のバージョンを常に更新してください。

結論

Next.js 13 App Router は、React アプリケーション開発における重要な前進を表します。直感的なファイル システム ベースのルーティング システムを提供し、React Server Components の機能を活用することで、開発者はパフォーマンスが高く、スケーラブルで保守可能な Web アプリケーションを構築できます。

カバー レター ジェネレーターの例で示したように、App Router は、複雑で動的な Web アプリケーションを作成するプロセスを簡素化します。単純なポートフォリオ サイトを構築している場合でも、複雑な Web アプリケーションを構築している場合でも、App Router をマスターすると、Next.js の開発エクスペリエンスが大幅に向上します。

覚えておいてください、学ぶための最良の方法は実践することです。 Resumate-NextJS リポジトリのクローンを作成し、コードを実験し、App Router を使用して独自の機能を実装してみてください。コーディングを楽しんでください!