Summary  
Shows how to set up authentication by defining a custom sign-in route and enforce protected routes through callback logic and middleware in code.  

General domain of usage  
Web applications

### 1. カスタムサインインページの追加
プロジェクトルートに `auth.config.ts` ファイルを作成し、次の内容を記述。

これは、pages オプションを使用してカスタムサインインページのルート（`/login`）を指定。

### 2. ミドルウェアによるルート保護
`auth.config.ts` を拡張してルート保護ロジックを追加。ログインしていないユーザーがダッシュボードにアクセスしようとした場合、ログインページへリダイレクトされる。

### 3. ミドルウェア
`middleware.ts` ファイルを作成し、NextAuth.js を初期化して指定した設定でルートを保護する。

カスタムサインインページを設定し、ルート保護のロジックを追加。ミドルウェアにより、認証が確認されるまで保護されたルートはレンダリングされず、セキュリティとパフォーマンスが向上する。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

認証の設定とルートの保護

プロジェクトに戻る

1. カスタムサインインページの追加

2. ミドルウェアによるルート保護

3. ミドルウェア

実践例