Next.js FastAPI 模板项目使用指南

1. 项目目录结构及介绍

本项目模板是一个集成了 Next.js 和 FastAPI 的全栈 TypeScript + Python 项目。以下是项目的目录结构及其说明：

nextjs-fastapi-template/
├── .github/                # GitHub 工作流程和钩子配置
├── fastapi_backend/        # FastAPI 后端代码目录
│   ├── ...
│   └── ...
├── nextjs-frontend/        # Next.js 前端代码目录
│   ├── ...
│   └── ...
├── .gitignore              # Git 忽略文件配置
├── .pre-commit-config.yaml # Pre-commit 钩子配置
├── CHANGELOG.md            # 项目更新日志
├── CONTRIBUTING.md         # 贡献指南
├── LICENSE.txt             # 项目许可证
├── Makefile                # Makefile 文件，用于自动化任务
├── README.md               # 项目说明文件
├── docker-compose.yml      # Docker Compose 配置文件
├── prod-backend-deploy.yml # 生产环境后端部署配置
└── prod-frontend-deploy.yml # 生产环境前端部署配置

• .github/：包含 GitHub 工作流程和钩子的配置文件。
• fastapi_backend/：FastAPI 后端的代码目录，包括路由、模型、服务等。
• nextjs-frontend/：Next.js 前端的代码目录，包括 React 组件、样式等。
• .gitignore：指定 Git 忽略的文件和目录。
• .pre-commit-config.yaml：配置 Pre-commit 钩子，用于在提交前执行代码质量检查。
• CHANGELOG.md：记录项目的更新和变化。
• CONTRIBUTING.md：提供贡献指南，帮助贡献者了解如何参与项目。
• LICENSE.txt：项目的开源许可证。
• Makefile：定义了一系列的任务，如启动服务、构建镜像等。
• README.md：项目说明文件，介绍了项目的相关信息和使用方法。
• docker-compose.yml：定义了项目的 Docker 服务，包括数据库、缓存等。
• prod-backend-deploy.yml 和 prod-frontend-deploy.yml：分别是生产环境后端和前端的部署配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 Makefile 和各自环境的启动脚本中。

• Makefile：包含了项目的各种自动化任务，如启动后端、启动前端、构建镜像等。

  start-backend:
      uv sync
  
  start-frontend:
      pnpm install
      pnpm run dev
  

• fastapi_backend/ 目录下的 main.py 或类似的入口文件，是 FastAPI 应用的启动点。

  from fastapi import FastAPI
  
  app = FastAPI()
  
  @app.get("/")
  def read_root():
      return {"message": "Hello World"}
  

• nextjs-frontend/ 目录下的 pages/index.js 或类似的入口文件，是 Next.js 应用的启动点。

  export default function Home() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
  

3. 项目的配置文件介绍

项目的配置文件分为后端和前端两部分。

• 后端配置文件：位于 fastapi_backend/.env.example 和 .env。.env.example 文件提供了所有可能的配置项，而 .env 文件包含实际使用的配置值。

  SECRET_KEY=your_secret_key
  DATABASE_URL=postgresql://username:password@localhost/dbname
  ...
  

• 前端配置文件：位于 nextjs-frontend/.env.example 和 .env.local。前端配置通常包括 API 端点、API 密钥等。

  NEXT_PUBLIC_API_URL=http://localhost:8000
  ...