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