Next.js Boilerplate 使用教程

Next.js Boilerplate 使用教程

nextjs-boilerplateA super powerful NextJS boilerplate developed following the Feature driven pattern项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-boilerplate

1. 项目的目录结构及介绍

nextjs-boilerplate/
├── .github/
│   └── workflows/
├── .husky/
├── .vscode/
├── public/
│   ├── favicon.ico
│   └── images/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Header.tsx
│   ├── styles/
│   │   └── globals.css
│   └── utils/
│       └── api.ts
├── .env.example
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── next.config.js
├── package.json
└── tsconfig.json

目录结构说明

• .github/: GitHub 配置文件，包含 CI/CD 工作流。
• .husky/: Husky 配置文件，用于 Git 钩子。
• .vscode/: VSCode 配置文件。
• public/: 静态资源文件，如图片、favicon 等。
• src/: 源代码目录。
  • app/: Next.js 应用的主要文件，包含布局和页面组件。
  • components/: 通用组件。
  • styles/: 全局样式文件。
  • utils/: 工具函数。
• .env.example: 环境变量示例文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• next.config.js: Next.js 配置文件。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

package.json

{
  "name": "nextjs-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "eslint-config-next": "^14.0.0",
    "typescript": "^5.0.0"
  }
}

启动命令

• 开发模式: npm run dev
• 构建项目: npm run build
• 启动生产服务器: npm run start
• 代码检查: npm run lint

3. 项目的配置文件介绍

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

.prettierrc

{
  "singleQuote": true,

nextjs-boilerplateA super powerful NextJS boilerplate developed following the Feature driven pattern项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-boilerplate