NextBase Next.js Supabase Starter 项目教程

NextBase Next.js Supabase Starter 项目教程

nextbase-nextjs-supabase-starter🚀⚡️ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. 🚀 Next.js 🔥 Supabase 💻 TypeScript 💚 ESLint 🎨 Prettier 🐶 Husky 🧹 Lint-Staged 🧪 Jest 🧪 Testing Library 🕹️ Playwright ✍️ Commitizen 💬 Commitlint 💻 VSCode 🌪️ Vercel 🎨 PostCSS 🍃 Tailwind CSS ⚛️ React Query 项目地址:https://gitcode.com/gh_mirrors/ne/nextbase-nextjs-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"]
}

通过以上配置文件，可以确保项目在开发和生产环境中具有一致的行为和代码风格。

nextbase-nextjs-supabase-starter🚀⚡️ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. 🚀 Next.js 🔥 Supabase 💻 TypeScript 💚 ESLint 🎨 Prettier 🐶 Husky 🧹 Lint-Staged 🧪 Jest 🧪 Testing Library 🕹️ Playwright ✍️ Commitizen 💬 Commitlint 💻 VSCode 🌪️ Vercel 🎨 PostCSS 🍃 Tailwind CSS ⚛️ React Query 项目地址:https://gitcode.com/gh_mirrors/ne/nextbase-nextjs-supabase-starter