这是一个 Next.js 应用程序,使用 NextAuth.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 组件确保只有已认证用户才能访问仪表盘和个人资料等特定页面。如果你想为此项目贡献力量,请 fork 仓库并提交包含你更改的拉取请求。
此项目基于 MIT 许可证授权。有关更多详细信息,请参阅 LICENSE 文件。