nextjs创建流程

以下是 Next.js 项目的标准创建流程，结合最佳实践和最新版本推荐：

1. ‌环境准备‌
   确保已安装 ‌Node.js‌（建议使用最新稳定版）。在终端运行以下命令验证：
   node -v（显示版本号即成功）3
   npm -v（Node.js 会自带 npm）13

2. ‌创建项目‌
   使用官方脚手架 create-next-app：

   bashCopy Code
   npx create-next-app@latest 项目名称
   

   或根据包管理器选择：
   yarn create next-app 或 pnpm create next-app 23
   ‌交互式配置选项‌（按需选择）：

   • 是否使用 ‌TypeScript‌
   • 是否启用 ‌ESLint‌（代码检查）
   • 是否启用 ‌Tailwind CSS‌（样式框架）
   • 是否使用 ‌**src/ 目录**‌（源码组织方式）
   • 是否启用 ‌App Router‌（Next.js 13+ 新版路由）
   • 是否自定义导入别名 23

3. ‌进入项目目录并启动开发服务器‌

   bashCopy Code
   cd 项目名称
   npm run dev
   

   项目默认运行在 http://localhost:3000 23

4. ‌关键目录说明（初始结构） ‌

   • ‌**app/ 或 pages/** ‌：页面路由目录（取决于是否启用 App Router）
   • ‌**public/** ‌：存放静态资源（图片、字体等）
   • ‌**next.config.js**‌：项目配置文件（可扩展 Webpack 等） 45

5. ‌常用命令‌

   • npm run dev：开发模式（热更新）
   • npm run build：构建生产版本（生成优化代码）
   • npm run start：启动生产服务器（需先 build）
   • npm run lint：运行 ESLint 代码检查 26

‌可选配置（按需添加） ‌：

• ‌添加 TypeScript‌（若初始未选）：

  bashCopy Code
  npm install --save-dev typescript @types/react @types/node
  touch tsconfig.json
  

  重启 npm run dev，Next.js 会自动填充 tsconfig.json 2

• ‌样式方案‌：支持 CSS Modules、Tailwind CSS、Sass（需 npm install sass）或 CSS-in-JS 库（如 styled-components）23

‌最佳实践‌：建议在项目创建初期启用 ‌TypeScript‌ 和 ‌ESLint‌ 以提升代码质量与可维护性；‌App Router‌ 是 Next.js 未来的发展方向，新项目推荐启用 23。