new strategy to build static pages

Author: pettinarip

app/[locale]/10years/page.tsx

@@ -40,7 +40,6 @@ import {
 } from "./_components/utils"
 import TenYearJsonLD from "./page-jsonld"
 
-import { routing } from "@/i18n/routing"
 import {
   getHolderEvents,
   getTransferEvents,
@@ -411,12 +410,6 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateStaticParams() {
-  return routing.locales.map((locale) => ({
-    locale,
-  }))
-}
-
 export async function generateMetadata({
   params,
 }: {

app/[locale]/[...slug]/page.tsx

@@ -17,7 +17,7 @@ import { getLayoutFromSlug } from "@/lib/utils/layout"
 import { checkPathValidity, getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import { LOCALES_CODES } from "@/lib/constants"
+import { STATIC_LOCALES } from "@/lib/constants"
 
 import SlugJsonLD from "./page-jsonld"
 
@@ -32,8 +32,8 @@ export default async function Page({ params }: { params: SlugPageParams }) {
   const { locale, slug: slugArray } = params
 
   // Check if this specific path is in our valid paths
-  const validPaths = (await generateStaticParams()) as SlugPageParams[]
-  const isValidPath = checkPathValidity(validPaths, params)
+  const slugs = await getPostSlugs("/")
+  const isValidPath = checkPathValidity(slugs, "/" + slugArray.join("/"))
 
   if (!isValidPath) notFound()
 
@@ -107,7 +107,7 @@ export async function generateStaticParams() {
   try {
     const slugs = await getPostSlugs("/")
 
-    return LOCALES_CODES.flatMap((locale) =>
+    return STATIC_LOCALES.flatMap((locale) =>
       slugs.map((slug) => ({
         slug: slug.split("/").slice(1),
         locale,

app/[locale]/get-eth/page.tsx

@@ -49,7 +49,6 @@ import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import GetEthPageJsonLD from "./page-jsonld"
 
-import { routing } from "@/i18n/routing"
 import uniswap from "@/public/images/dapps/uni.png"
 import dapps from "@/public/images/doge-computer.png"
 import bancor from "@/public/images/exchanges/bancor.png"
@@ -426,10 +425,6 @@ export default async function Page({ params }: { params: PageParams }) {
   )
 }
 
-export async function generateStaticParams() {
-  return routing.locales.map((locale) => ({ locale }))
-}
-
 export async function generateMetadata({
   params,
 }: {

app/[locale]/layer-2/networks/_components/networks.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { Suspense } from "react"
+
 import CalloutSSR from "@/components/CalloutSSR"
 import { ContentHero, ContentHeroProps } from "@/components/Hero"
 import Layer2NetworksTable from "@/components/Layer2NetworksTable"
@@ -29,11 +31,13 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
       <MainArticle className="relative flex flex-col">
         <ContentHero {...heroProps} />
 
-        <Layer2NetworksTable
-          layer2Data={layer2Data}
-          locale={locale}
-          mainnetData={mainnetData}
-        />
+        <Suspense fallback={null}>
+          <Layer2NetworksTable
+            layer2Data={layer2Data}
+            locale={locale}
+            mainnetData={mainnetData}
+          />
+        </Suspense>
 
         <div id="more-advanced-cta" className="w-full px-8 py-9">
           <div className="flex flex-col gap-8 bg-main-gradient px-12 py-14">

app/[locale]/layer-2/page.tsx

@@ -22,7 +22,6 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 import Layer2Page from "./_components/layer-2"
 import Layer2PageJsonLD from "./page-jsonld"
 
-import { routing } from "@/i18n/routing"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 import { fetchL2beat } from "@/lib/api/fetchL2beat"
 
@@ -89,12 +88,6 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateStaticParams() {
-  return routing.locales.map((locale) => ({
-    locale,
-  }))
-}
-
 export async function generateMetadata({
   params,
 }: {

app/[locale]/layout.tsx

@@ -11,6 +11,8 @@ import Matomo from "@/components/Matomo"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
+import { STATIC_LOCALES } from "@/lib/constants"
+
 import Providers from "./providers"
 
 import "@/styles/global.css"
@@ -32,6 +34,12 @@ const ibmPlexMono = IBM_Plex_Mono({
   variable: "--font-mono",
 })
 
+export async function generateStaticParams() {
+  return STATIC_LOCALES.map((locale) => ({
+    locale,
+  }))
+}
+
 export default async function LocaleLayout({
   children,
   params: { locale },

app/[locale]/page.tsx

@@ -86,7 +86,6 @@ import AppsHighlight from "./apps/_components/AppsHighlight"
 import IndexPageJsonLD from "./page-jsonld"
 import { getActivity, getUpcomingEvents } from "./utils"
 
-import { routing } from "@/i18n/routing"
 import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
 import { fetchApps } from "@/lib/api/fetchApps"
 import { fetchBeaconchainEpoch } from "@/lib/api/fetchBeaconchainEpoch"
@@ -1002,12 +1001,6 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateStaticParams() {
-  return routing.locales.map((locale) => ({
-    locale,
-  }))
-}
-
 export async function generateMetadata({
   params,
 }: {

app/[locale]/wallets/find-wallet/page.tsx

@@ -23,8 +23,6 @@ import {
 
 import FindWalletPageJsonLD from "./page-jsonld"
 
-import { routing } from "@/i18n/routing"
-
 const Page = async ({ params }: { params: PageParams }) => {
   const { locale } = params
   const t = await getTranslations({
@@ -84,12 +82,6 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateStaticParams() {
-  return routing.locales.map((locale) => ({
-    locale,
-  }))
-}
-
 export async function generateMetadata({
   params,
 }: {

app/[locale]/wallets/page.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from "react"
+import { ComponentPropsWithRef, Suspense } from "react"
 import { pick } from "lodash"
 import {
   getMessages,
@@ -305,14 +305,16 @@ const Page = async ({ params }: { params: PageParams }) => {
 
         {locale === "en" ? (
           <div className="my-20 w-full px-0 py-4">
-            <Simulator data={walletOnboardingSimData}>
-              <p className="mb-2 text-lg italic leading-base text-body-medium md:text-xl lg:text-2xl">
-                Interactive tutorial
-              </p>
-              <h2 className="m-0 text-3xl font-bold leading-[115%] lg:text-5xl">
-                How to use a wallet
-              </h2>
-            </Simulator>
+            <Suspense fallback={null}>
+              <Simulator data={walletOnboardingSimData}>
+                <p className="mb-2 text-lg italic leading-base text-body-medium md:text-xl lg:text-2xl">
+                  Interactive tutorial
+                </p>
+                <h2 className="m-0 text-3xl font-bold leading-[115%] lg:text-5xl">
+                  How to use a wallet
+                </h2>
+              </Simulator>
+            </Suspense>
           </div>
         ) : (
           <div className="my-12 mt-4 w-full border-t bg-gradient-main px-0 py-16 lg:mt-8">

src/lib/constants.ts

@@ -23,6 +23,9 @@ const BUILD_LOCALES = process.env.NEXT_PUBLIC_BUILD_LOCALES
 export const LOCALES_CODES = BUILD_LOCALES
   ? BUILD_LOCALES.split(",")
   : i18nConfig.map(({ code }) => code)
+export const STATIC_LOCALES = process.env.NEXT_PUBLIC_STATIC_LOCALES
+  ? process.env.NEXT_PUBLIC_STATIC_LOCALES.split(",")
+  : []
 
 // Site urls
 export const SITE_URL =