Séances de cinéma avec Next.js : pages cinéma et appels API en cache

npx create-next-app@latest seances --ts --app --no-tailwind --yes
cd seances

echo 'API_CINEMA_KEY=ac_live_…' > .env.local

import { cacheLife } from 'next/cache'

const API = 'https://api.api-cinema.com/v1'

export interface Cinema {
  id: string
  slug: string
  name: string
  address: string | null
  city: string
  postalCode: string | null
  timezone: string
  website: string | null
}

export interface Movie {
  id: string
  title: string
  durationMin: number | null
  director: string | null
  posterUrl: string | null
}

export interface Showtime {
  id: string
  startsAt: string // heure locale du cinéma : "2026-11-02T20:30:00"
  version: 'VF' | 'VO' | 'VOST' | 'VFST' | 'UNKNOWN'
  format: string | null
  bookingUrl: string | null
  movie: Movie
}

/** Un GET sur l’API, mis en cache une heure : tous les visiteurs d’une même page partagent la même réponse. */
async function api<T>(path: string, params: Record<string, string> = {}): Promise<T | null> {
  'use cache'
  cacheLife('hours')
  const query = new URLSearchParams(params)
  const res = await fetch(`${API}${path}?${query}`, {
    headers: { Authorization: `Bearer ${process.env.API_CINEMA_KEY}` },
  })
  if (res.status === 404)
    return null
  if (!res.ok)
    throw new Error(`API Cinéma a répondu ${res.status}`)
  return res.json()
}

export async function getCinemas(city: string): Promise<Cinema[]> {
  const res = await api<{ data: Cinema[] }>('/cinemas', { city, limit: '100' })
  return res?.data ?? []
}

export async function getCinema(slug: string): Promise<Cinema | null> {
  return api<Cinema>(`/cinemas/${encodeURIComponent(slug)}`)
}

/** Une journée de séances d’un cinéma (aujourd’hui si `date` est absent), avec le film de chacune. */
export async function getShowtimes(slug: string, date?: string): Promise<Showtime[]> {
  const params: Record<string, string> = { include: 'movie', limit: '1000' }
  if (date)
    params.date = date
  const res = await api<{ data: Showtime[] }>(`/cinemas/${encodeURIComponent(slug)}/showtimes`, params)
  return res?.data ?? []
}

/** Séances regroupées par film, le plus programmé d’abord. */
export function byMovie(showtimes: Showtime[]) {
  const movies = new Map<string, { movie: Movie, showtimes: Showtime[] }>()
  for (const s of showtimes) {
    const entry = movies.get(s.movie.id) ?? { movie: s.movie, showtimes: [] }
    entry.showtimes.push(s)
    movies.set(s.movie.id, entry)
  }
  return [...movies.values()].sort((a, b) => b.showtimes.length - a.showtimes.length)
}

import Link from 'next/link'
import { Suspense } from 'react'
import { getCinemas } from '@/lib/api-cinema'

export default function Home({ searchParams }: PageProps<'/'>) {
  return (
    <main>
      <h1>Cinémas</h1>
      <form>
        <input name="city" placeholder="Ville, ex. Lyon ou Chicago" />
        <button type="submit">Rechercher</button>
      </form>
      <Suspense fallback={<p>Chargement…</p>}>
        <CinemaList searchParams={searchParams} />
      </Suspense>
    </main>
  )
}

async function CinemaList({ searchParams }: Pick<PageProps<'/'>, 'searchParams'>) {
  const { city } = await searchParams
  const name = typeof city === 'string' && city.trim() ? city.trim() : 'Lyon'
  const cinemas = await getCinemas(name)
  if (!cinemas.length)
    return <p>Aucun cinéma trouvé à {name}.</p>
  return (
    <ul>
      {cinemas.map(c => (
        <li key={c.id}>
          <Link href={`/cinemas/${c.slug}`}>{c.name}</Link> · {c.address}
        </li>
      ))}
    </ul>
  )
}

import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { Suspense } from 'react'
import { byMovie, getCinema, getShowtimes } from '@/lib/api-cinema'

export async function generateMetadata({ params }: PageProps<'/cinemas/[slug]'>): Promise<Metadata> {
  const cinema = await getCinema((await params).slug)
  return { title: cinema ? `Séances · ${cinema.name}, ${cinema.city}` : 'Cinéma introuvable' }
}

export default function CinemaPage(props: PageProps<'/cinemas/[slug]'>) {
  return (
    <main>
      <Suspense fallback={<p>Chargement des séances…</p>}>
        <Programme {...props} />
      </Suspense>
    </main>
  )
}

async function Programme({ params, searchParams }: PageProps<'/cinemas/[slug]'>) {
  const { slug } = await params
  const { date } = await searchParams
  const day = typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : undefined
  const [cinema, showtimes] = await Promise.all([getCinema(slug), getShowtimes(slug, day)])
  if (!cinema)
    notFound()

  return (
    <>
      <h1>{cinema.name}</h1>
      <p>{cinema.address}, {cinema.postalCode} {cinema.city}</p>
      <nav>
        {nextDays(cinema.timezone, 7).map(d => (
          <Link key={d.date} href={`/cinemas/${slug}?date=${d.date}`}>{d.label}</Link>
        ))}
      </nav>
      {showtimes.length === 0 && <p>Aucune séance ce jour-là.</p>}
      {byMovie(showtimes).map(({ movie, showtimes }) => (
        <section key={movie.id}>
          <h2>{movie.title}</h2>
          {movie.posterUrl && <img src={movie.posterUrl} alt="" width={120} />}
          <p>{[movie.director, movie.durationMin && `${movie.durationMin} min`].filter(Boolean).join(' · ')}</p>
          <ul>
            {showtimes.map(s => (
              <li key={s.id}>
                {/* startsAt est déjà l’heure locale du cinéma : aucune conversion de fuseau */}
                <a href={s.bookingUrl ?? undefined}>{s.startsAt.slice(11, 16)}</a> {s.version}
                {s.format && s.format !== '2D' && ` · ${s.format}`}
              </li>
            ))}
          </ul>
        </section>
      ))}
    </>
  )
}

/** Les `count` prochains jours en YYYY-MM-DD dans le fuseau du cinéma, avec un libellé court. */
function nextDays(timeZone: string, count: number) {
  const iso = new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' })
  const label = new Intl.DateTimeFormat('fr', { timeZone, weekday: 'short', day: 'numeric' })
  return Array.from({ length: count }, (_, i) => {
    const d = new Date(Date.now() + i * 86_400_000)
    return { date: iso.format(d), label: i === 0 ? 'Aujourd’hui' : label.format(d) }
  })
}

npm run dev