Theme Parks
{/* Client Component */}
{/* Can be Server Component */}
);
}
```
#### Park Detail Page
`app/parks/[parkSlug]/page.tsx` (Server Component):
```typescript
import { env } from '@/lib/env';
import { ParkDetail } from '@/components/parks/ParkDetail';
import { notFound } from 'next/navigation';
export async function generateStaticParams() {
// Pre-render top 100 parks
const parks = await fetch(`${env.NEXT_PUBLIC_DJANGO_API_URL}/parks/?page_size=100`)
.then(r => r.json());
return parks.results.map((park: any) => ({
parkSlug: park.slug,
}));
}
export async function generateMetadata({ params }: { params: { parkSlug: string } }) {
const park = await fetch(`${env.NEXT_PUBLIC_DJANGO_API_URL}/parks/${params.parkSlug}/`)
.then(r => r.json());
return {
title: `${park.name} - ThrillWiki`,
description: park.description,
};
}
export default async function ParkDetailPage({
params
}: {
params: { parkSlug: string }
}) {
const park = await fetch(
`${env.NEXT_PUBLIC_DJANGO_API_URL}/parks/${params.parkSlug}/`,
{ next: { revalidate: 3600 } } // Cache for 1 hour
).then(r => r.json())
.catch(() => notFound());
return