TypeScript Next.js Starter 项目教程
1. 项目的目录结构及介绍
typescript-nextjs-starter/
├── .github/
│ └── workflows/
├── .husky/
├── .vscode/
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ │ ├── Button.tsx
│ │ └── Header.tsx
│ ├── styles/
│ │ └── globals.css
│ └── utils/
│ └── api.ts
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── commitlint.config.js
├── next.config.js
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock
目录结构介绍
- .github/workflows: 包含GitHub Actions的工作流配置文件。
- .husky: 包含Husky的配置文件,用于在提交前运行脚本。
- .vscode: 包含VSCode的配置文件,用于统一开发环境。
- public: 包含公共静态资源,如favicon和Vercel的SVG图标。
- src: 源代码目录。
- app: Next.js 13的新特性,用于定义应用的路由和布局。
- components: 包含React组件。
- styles: 包含全局样式文件。
- utils: 包含工具函数。
- .editorconfig: 用于统一编辑器的配置。
- .eslintrc.json: ESLint配置文件,用于代码检查。
- .gitignore: Git忽略文件配置。
- .prettierrc: Prettier配置文件,用于代码格式化。
- commitlint.config.js: Commitlint配置文件,用于规范提交信息。
- next.config.js: Next.js配置文件。
- package.json: 项目依赖和脚本配置。
- README.md: 项目说明文档。
- tsconfig.json: TypeScript配置文件。
- yarn.lock: Yarn锁定文件,用于确保依赖版本一致。
2. 项目的启动文件介绍
src/app/layout.tsx
这是Next.js 13的新特性,用于定义应用的全局布局。
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
src/app/page.tsx
这是Next.js 13的新特性,用于定义应用的首页。
export default function Home() {
return (
<div>
<h1>Welcome to Next.js!</h1>
</div>
)
}
3. 项目的配置文件介绍
next.config.js
Next.js的配置文件,可以自定义各种配置,如路由、构建选项等。
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
tsconfig.json
TypeScript的配置文件,定义了TypeScript编译器的选项。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["next