Building qurandaily.org: 37,000 pages statically prerendered with Next.js 15 + next-intl

Last week, I launched qurandaily.org, an ad-free website featuring the Quran, hadiths, and duas in six different languages: English, Indonesian, Arabic, Urdu, Turkish, and French. Every one of its approximately 37,000 pages is fully prerendered during the build process, eliminating the need for server-side rendering (SSR) or database calls during user interaction.

The article dives into three key decisions made during the development process, along with the corresponding code and configuration for each. These decisions apply to any large multi-locale content site.

1. Generating static parameters for 6,236 records across 6 locales using generateStaticParams:

The canonical content consists of 6,236 verses (ayat). Each verse is rendered as a separate URL, scoped by locale and surah. The directory structure in the app router follows this pattern: app/[locale]/quran/[surahSlug]/[verse]/page.tsx. Within this file, two functions are exported to assist Next.js in generating the required routes at build time:

- dynamicParams: Set to false to ensure any route not prebuilt returns a 404, maintaining the integrity of the canonical corpus.

- dynamic: Set to force-static to indicate that these routes are prebuilt.

The generateStaticParams function performs the following tasks:

- Retrieves an array of surahs from the Quran data source.

- Iterates through each locale (6 in total) and each surah.

- For each surah, generates a route for every verse (1-6,236) by pushing an object containing the locale, surah slug, and verse number into a params array.

- Returns the params array, which Next.js uses to emit the corresponding static routes.

This process results in a total of 6 × 6,236 = 37,416 static routes for the Quran alone. Additionally, other content like hadiths, duas, 99 Names, prayer-time city pages, and learning pages are included, bringing the total emitted HTML files to just under 40,000.