Next.js 订阅支付项目教程

Next.js 订阅支付项目教程

nextjs-subscription-paymentsClone, deploy, and fully customize a SaaS subscription application with Next.js.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-subscription-payments

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

nextjs-subscription-payments/
├── app/
│   ├── components/
│   ├── fixtures/
│   ├── public/
│   ├── styles/
│   ├── supabase/
│   ├── utils/
├── env.example
├── env.local.example
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── components.json
├── middleware.ts
├── next-env.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── schema.sql
├── tailwind.config.js
├── tsconfig.json
├── types_db.ts

目录结构介绍

• app/: 包含应用程序的主要代码，包括组件、公共资源、样式、Supabase 相关代码和工具函数。
• env.example 和 env.local.example: 环境变量示例文件。
• .gitignore: Git 忽略文件配置。
• .prettierignore 和 .prettierrc.json: Prettier 格式化配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• components.json: 组件配置文件。
• middleware.ts: 中间件配置文件。
• next-env.d.ts: Next.js 环境声明文件。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: pnpm 锁定文件。
• postcss.config.js: PostCSS 配置文件。
• schema.sql: 数据库模式文件。
• tailwind.config.js: Tailwind CSS 配置文件。
• tsconfig.json: TypeScript 配置文件。
• types_db.ts: 数据库类型定义文件。

2. 项目的启动文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "nextjs-subscription-payments",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "latest",
    "eslint-config-next": "latest"
  }
}

启动命令

• pnpm dev: 启动开发服务器。
• pnpm build: 构建生产环境应用。
• pnpm start: 启动生产环境服务器。
• pnpm lint: 运行代码检查。

3. 项目的配置文件介绍

.env.example 和 .env.local.example

这两个文件是环境变量配置的示例文件，用于存储敏感信息和配置选项。

# .env.example
NEXT_PUBLIC_SUPABASE_URL=https://your-supabase-url.com
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret

next.config.js

Next.js 配置文件，用于自定义 Next.js 应用的行为。

module.exports = {
  reactStrictMode: true,
  env: {
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET
  }
}

tailwind.config.js

nextjs-subscription-paymentsClone, deploy, and fully customize a SaaS subscription application with Next.js.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-subscription-payments