これは、NextAuth.js を使用して認証を実装する Next.js アプリケーションです。このアプリは、特定のページにアクセスする際に認証を必要とする保護されたルートを備えています。
nextjs-auth-app
├── components
│ ├── Layout.js # Layout component for consistent structure
│ ├── Navbar.js # Navigation bar component
│ └── ProtectedRoute.js # Component to protect routes
├── pages
│ ├── _app.js # Custom App component
│ ├── _document.js # Custom Document structure
│ ├── api
│ │ └── auth
│ │ └── [...nextauth].js # NextAuth.js configuration
│ ├── dashboard.js # Protected Dashboard page
│ ├── index.js # Landing page
│ ├── login.js # Login page
│ └── profile.js # User Profile page
├── public # Static assets
├── styles
│ ├── Home.module.css # CSS module for Home component
│ └── globals.css # Global CSS styles
├── utils
│ └── auth.js # Utility functions for authentication
├── .env.local # Environment variables
├── next.config.js # Next.js configuration
├── package.json # npm configuration
└── README.md # Project documentation
このプロジェクトを始めるには、次の手順に従ってください。
リポジトリをクローンします:
git clone <repository-url>
cd nextjs-auth-app
依存関係をインストールします:
npm install
環境変数を設定します:
ルートディレクトリに .env.local ファイルを作成し、API キーやシークレットなどの環境変数を追加します。
開発サーバーを起動します:
npm run dev
ブラウザを開きます:
http://localhost:3000 にアクセスしてアプリケーションを表示します。
ProtectedRoute コンポーネントにより、認証済みユーザーのみがダッシュボードやプロフィールなどの特定のページにアクセスできるようになります。このプロジェクトに貢献したい場合は、リポジトリをフォークして、変更内容をプルリクエストで送信してください。
このプロジェクトは MIT ライセンスの下でライセンスされています。詳細については、LICENSE ファイルを参照してください。