NextBase Next.js Supabase Starter 项目教程
1. 项目的目录结构及介绍
nextbase-nextjs-supabase-starter/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── ...
├── components/
│ ├── Header.tsx
│ ├── Footer.tsx
│ └── ...
├── public/
│ ├── favicon.ico
│ └── ...
├── styles/
│ ├── globals.css
│ └── ...
├── supabase/
│ ├── client.ts
│ └── ...
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
目录结构介绍
- app/: 包含Next.js应用程序的主要页面和布局文件。
layout.tsx
: 应用程序的主布局文件。page.tsx
: 应用程序的主页面文件。
- components/: 包含应用程序的React组件。
Header.tsx
: 页面的头部组件。Footer.tsx
: 页面的底部组件。
- public/: 包含静态资源文件,如favicon等。
- styles/: 包含全局样式文件。
globals.css
: 全局CSS样式文件。
- supabase/: 包含与Supabase相关的配置和客户端文件。
client.ts
: Supabase客户端配置文件。
- .eslintrc.json: ESLint配置文件。
- .gitignore: Git忽略文件配置。
- .prettierrc: Prettier配置文件。
- next.config.js: Next.js配置文件。
- package.json: 项目依赖和脚本配置文件。
- README.md: 项目说明文档。
- tsconfig.json: TypeScript配置文件。
2. 项目的启动文件介绍
package.json
package.json
文件是Node.js项目的核心配置文件,包含了项目的依赖、脚本命令等信息。
{
"name": "nextbase-nextjs-supabase-starter",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"test": "jest",
"test:e2e": "playwright test"
},
"dependencies": {
"next": "latest",
"react": "latest",
"react-dom": "latest",
"supabase-js": "latest"
},
"devDependencies": {
"@types/node": "latest",
"@types/react": "latest",
"eslint": "latest",
"eslint-config-next": "latest",
"jest": "latest",
"playwright": "latest",
"typescript": "latest"
}
}
启动命令
npm run dev
: 启动开发服务器。npm run build
: 构建生产环境应用。npm run start
: 启动生产环境服务器。npm run lint
: 运行ESLint检查代码。npm run test
: 运行单元测试。npm run test:e2e
: 运行端到端测试。
3. 项目的配置文件介绍
next.config.js
next.config.js
是Next.js的配置文件,用于自定义Next.js应用程序的行为。
module.exports = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['example.com'],
},
};
.eslintrc.json
.eslintrc.json
是ESLint的配置文件,用于定义代码风格和规则。
{
"extends": "next/core-web-vitals",
"rules": {
"react/react-in-jsx-scope": "off"
}
}
.prettierrc
.prettierrc
是Prettier的配置文件,用于格式化代码。
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
tsconfig.json
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
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
通过以上配置文件,可以确保项目在开发和生产环境中具有一致的行为和代码风格。