Next.js + FastAPI構成のベストプラクティス

project/
├── frontend/          # Next.js
│   ├── src/
│   ├── public/
│   └── package.json
├── backend/           # FastAPI
│   ├── app/
│   ├── requirements.txt
│   └── main.py
└── docker-compose.yml

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
    
  backend:
    build: ./backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

const useAPI = () => {
  const fetchAPI = async (endpoint: string, options?: RequestInit) => {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      credentials: 'include',
      ...options,
    })
    return response.json()
  }
  
  return { fetchAPI }
}