一个现代化的 Next.js 项目模板，包含完整的目录结构和最佳实践配置
A modern Next.js project template with complete directory structure and best practices configuration
- 点击 "Use this template" 按钮 或 Fork 此仓库 / Click "Use this template" button or Fork this repository
- 克隆你的新仓库 / Clone your new repository
git clone https://github.com/yourusername/your-project-name.git
cd your-project-name- 安装依赖 / Install dependencies
npm install
# 或者 / or
yarn install
# 或者 / or
pnpm install- 开始开发 / Start development
npm run dev
# 或者 / or
yarn dev
# 或者 / or
pnpm dev在浏览器中打开 http://localhost:3000 查看结果。
Open http://localhost:3000 with your browser to see the result.
您可以通过修改 app/page.tsx 和 components/ 文件来开始编辑页面。文件保存后页面会自动更新。
You can start editing the page by modifying app/page.tsx and components/ files. The page auto-updates as you edit the file.
nextjs-template/
├── app/ # Next.js App Router
│ ├── globals.css # 全局样式 / Global Styles
│ ├── layout.tsx # 根布局 / Root Layout
│ └── page.tsx # 首页 / Home Page
├── components/ # 组件目录 / Components Directory
│ ├── ui/ # UI 组件 / UI Components
│ │ ├── ActionButtons.tsx
│ │ ├── Footer.tsx
│ │ └── Header.tsx
│ ├── MainContent.tsx # 主要内容组件 / Main Content Component
│ └── WelcomeSection.tsx # 欢迎信息组件 / Welcome Section Component
├── lib/ # 工具库 / Utilities
│ ├── api.ts # API 工具 / API Utilities
│ └── utils.ts # 通用工具 / Common Utilities
├── contexts/ # React Context
├── types/ # 类型定义 / Type Definitions
├── hooks/ # 自定义 Hooks / Custom Hooks
└── public/ # 静态资源 / Static Assets
| 技术 / Technology | 版本 / Version | 描述 / Description |
|---|---|---|
| Next.js | 15.5.4 | React 框架，支持 App Router / React Framework with App Router |
| React | 19.1.0 | 用户界面库 / User Interface Library |
| TypeScript | ^5 | 类型安全的 JavaScript / Type-safe JavaScript |
| Tailwind CSS | ^4 | 实用优先的 CSS 框架 / Utility-first CSS Framework |
| ESLint | ^9 | 代码质量检查工具 / Code Quality Tool |
| Turbopack | - | 更快的构建工具 / Faster Build Tool |
- ✅ Next.js 15.5.4 - 最新版本的 React 框架 / Latest React Framework
- ✅ Tailwind CSS v4 - 现代化的样式框架 / Modern Styling Framework
- ✅ TypeScript - 完整的类型安全支持 / Complete Type Safety
- ✅ 模块化组件 - 清晰的组件结构 / Clear Component Structure
- ✅ 最佳实践 - 遵循 Next.js 官方推荐 / Follows Next.js Best Practices
- ✅ 开箱即用 - 无需额外配置即可开始开发 / Ready to Use Out of the Box
- ✅ 响应式设计 - 移动端友好的界面 / Mobile-friendly Interface
- ✅ ESLint 配置 - 代码质量保证 / Code Quality Assurance
部署 Next.js 应用最简单的方法是使用 Vercel 平台。
The easiest way to deploy your Next.js app is to use the Vercel Platform.
查看 Next.js 部署文档 了解更多部署选项。
Check out the Next.js deployment documentation for more deployment options.
要了解更多关于 Next.js 的信息，请查看以下资源：
To learn more about Next.js, take a look at the following resources:
- Next.js 文档 - 了解 Next.js 的功能和 API / Learn about Next.js features and API
- 学习 Next.js - 交互式 Next.js 教程 / Interactive Next.js tutorial
- Next.js GitHub 仓库 - 欢迎您的反馈和贡献！/ Your feedback and contributions are welcome!
欢迎提交 Issue 和 Pull Request！
Issues and Pull Requests are welcome!
本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情。
This project is open source and available under the MIT License.
- Next.js - 优秀的 React 框架 / Excellent React Framework
- Tailwind CSS - 实用的 CSS 框架 / Utility-first CSS Framework
- TypeScript - 类型安全的 JavaScript / Type-safe JavaScript
如果这个模板对您有帮助，请给个 ⭐ Star！
If this template helps you, please give it a ⭐ Star!
Made with ❤️ by XY2006DATE