A Static Page for Every Place

Lesson 2 of 10 · Tourism Tech · built from Nora Travels, Nora Labs, Mahesh Travellers and my hospitality sites

Travellers browse from another continent on hotel Wi-Fi. The fastest page is one that already exists as a file. Both tourism sites generate every page at build time.

Example — one page per destination

// app/destinations/[slug]/page.tsx
export async function generateStaticParams() {
  const destinations = getAllDestinations();
  return destinations.map((d) => ({ slug: d.slug }));
}

Example — one page per language (Mahesh Travellers)

// app/[locale]/page.jsx
export const dynamicParams = false;

export function generateStaticParams() {
  return Object.keys(content.copy).map((locale) => ({ locale }));
}

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const c = content.copy[locale];
  if (!c) return {};
  return { title: `Mahesh Travellers · ${locale.toUpperCase()} · Sri Lanka`, description: c.heroDesc };
}

• dynamicParams = false means an unknown locale is a 404, never a slow on-demand render.
• generateMetadata gives every language its own title and description for search engines.
• The production build lands in out/ — plain files any static host or CDN can serve.

Exercise

You add a Tamil translation. What is the only place you need to add data for the /ta/ page to be generated?

Keep going: ← Lesson 1 · Lesson 3 →