Next.js Boilerplate 使用教程

Next.js Boilerplate 使用教程

Next-js-Boilerplate🚀🎉📚 Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.3 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS项目地址:https://gitcode.com/gh_mirrors/ne/Next-js-Boilerplate

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

Next.js Boilerplate 项目的目录结构如下：

/Next-js-Boilerplate
├── .github
├── .husky
├── .vscode
├── __tests__
├── components
├── config
├── contexts
├── hooks
├── lib
├── pages
├── public
├── styles
├── utils
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── jest.config.js
├── next.config.js
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

目录介绍

• .github: 包含 GitHub 相关的配置文件，如 Actions 工作流。
• .husky: 包含 Husky 配置文件，用于 Git 钩子。
• .vscode: 包含 VSCode 的配置文件，如推荐扩展和设置。
• tests: 包含项目的测试文件。
• components: 包含 React 组件。
• config: 包含项目的配置文件，如 Sentry 配置。
• contexts: 包含 React 上下文。
• hooks: 包含自定义 React 钩子。
• lib: 包含库文件和辅助函数。
• pages: 包含 Next.js 页面组件。
• public: 包含公共资源，如图片和字体。
• styles: 包含全局样式和 Tailwind CSS 配置。
• utils: 包含实用工具函数。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• jest.config.js: Jest 配置文件。
• next.config.js: Next.js 配置文件。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件主要包括 package.json 中的脚本命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

启动命令介绍

• dev: 启动开发服务器。
• build: 构建生产环境代码。
• start: 启动生产环境服务器。
• lint: 运行 ESLint 进行代码检查。
• test: 运行 Jest 进行测试。
• storybook: 启动 Storybook 服务器。
• build-storybook: 构建 Storybook 静态文件。

3. 项目的配置文件介绍

next.config.js

next.config.js 是 Next.js 的主要配置文件，包含项目的基本配置和自定义配置：

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['some-module']);

module.exports = withPlugins([withTM], {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
  env: {
    SOME_ENV_VARIABLE: process.env.SOME_ENV_VARIABLE,
  },
});

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，包含 TypeScript 编译选项：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "preserve",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir

Next-js-Boilerplate🚀🎉📚 Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.3 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS项目地址:https://gitcode.com/gh_mirrors/ne/Next-js-Boilerplate