Next.js App Router

// app/shop/[slug]/page.tsx
export default async function ShopPage({ params }: { params: { slug: string } }) {
  const slug = (await params).slug  // "bkk-sports-club"
  const shop = await fetch(`${API_URL}/api/shops/${slug}`).then(r => r.json())
  return <ShopDetail shop={shop} />
}

// app/api/admin/proxy/[...path]/route.ts
export async function GET(req: NextRequest, { params }: { params: { path: string[] } }) {
  const { path } = await params
  // For /api/admin/proxy/bookings/123, path = ["bookings", "123"]
  const backendPath = `/api/admin/${path.join('/')}`
  // → /api/admin/bookings/123
}

// app/shop/[slug]/page.tsx — SERVER component
export default async function ShopPage({ params }) {
  const { slug } = await params
  // ✅ Can fetch directly — no loading state needed
  const shop = await fetch(`${API_URL}/api/shops/${slug}`, { cache: 'no-store' }).then(r => r.json())
  return (
    <div>
      <h1>{shop.name_en}</h1>
      <!-- BookingFlow is a CLIENT component imported here -->
      <BookingFlow shop={shop} resource={resource} />
    </div>
  )
}

export async function POST(request: NextRequest) {
  let body: { email?: string; password?: string }
  try {
    body = await request.json()
  } catch {
    return NextResponse.json({ error: 'Invalid request' }, { status: 400 })
  }

  // Forward to FastAPI with the right format
  const form = new URLSearchParams()
  form.set('username', body.email!)
  form.set('password', body.password!)

  const res = await fetch(`${API_BASE}/api/admin/auth/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: form.toString(),
  })

  if (!res.ok) return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 })

  const { access_token } = await res.json()
  // Set httpOnly cookie — browser JS can never read this
  const response = NextResponse.json({ ok: true })
  response.cookies.set('admin_token', access_token, {
    httpOnly: true, secure: true, sameSite: 'lax', maxAge: 60 * 60 * 24
  })
  return response
}

const BASE_DOMAIN = process.env.NEXT_PUBLIC_BASE_DOMAIN ?? 'localhost'
const RESERVED = new Set(['www', 'admin', 'api'])

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl

  // ① Admin auth guard
  if (pathname.startsWith('/admin')) {
    const hasToken = !!request.cookies.get('admin_token')
    if (pathname === '/admin/login') {
      if (hasToken) return NextResponse.redirect(new URL('/admin/dashboard', request.url))
      return NextResponse.next()  // show login page
    }
    if (!hasToken) return NextResponse.redirect(new URL('/admin/login', request.url))
    return NextResponse.next()   // authenticated, continue
  }

  // ② Subdomain → shop rewrite
  const hostname = (request.headers.get('host') ?? '').split(':')[0]
  const slug = hostname.replace(`.${BASE_DOMAIN}`, '')

  // admin subdomain: redirect to /admin/login (skip /api/* paths)
  if (slug === 'admin' && !pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/admin/login', request.url))
  }

  // shop subdomains: rewrite internally (but don't double-rewrite)
  if (slug && slug !== BASE_DOMAIN && slug !== 'www' && !RESERVED.has(slug) && !pathname.startsWith('/shop/')) {
    const url = request.nextUrl.clone()
    const path = url.pathname === '/' ? '' : url.pathname
    url.pathname = `/shop/${slug}${path}`
    return NextResponse.rewrite(url)  // URL in browser stays unchanged!
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],  // matches everything except static files
}

# Build args passed at docker compose build time
ARG NEXT_PUBLIC_API_URL=http://localhost:8000
ARG NEXT_PUBLIC_BASE_DOMAIN=localhost

# These become available to the build process
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXT_PUBLIC_BASE_DOMAIN=$NEXT_PUBLIC_BASE_DOMAIN

RUN npm run build  # ← The values are BAKED IN here. Changing them later has no effect.