The idea is to make /[locale]/en and /[locale]/ka directories generated statically with PPR. Interesting is that without the locale, as a parameter, the / directory has PPR sign after it is build (npm run build), but whenever I set the dynamic rote as /[locale]/layout.tsx and have the main page under app/[locale]/(home)/page.tsx all rotes (/ka and /en) become dynamic.
Here is the output after build is completed (λ server-rendered on demand):
├ λ /[locale] 12.8 kB 113 kB
├ ├ /en
├ └ /ka
when we have the directory that looks like:
├ /[locale]
├ /layout.tsx
└ /(home)
└ /page.tsx
expected build (Partial Prerender ◐):
├ ◐ /[locale] 12.8 kB 113 kB
├ ├ /en
├ └ /ka
So far, what I have noticed, is that generateStaticParams() function is only in /page/tsx files in examples provided by NextJS. The current content looks like below:
//src\app\[locale]\layout.tsx
import { ReactNode } from 'react';
import './globals.css';
export const dynamic = 'force-static';
export default async function RootLayout({
children,
params,
}: {
children: ReactNode;
params: { locale: string };
}) {
return (
<html lang={params.locale}>
<body>{children}</body>
</html>
);
}
export async function generateStaticParams() {
const locales = ['en', 'ka'];
return locales.map((locale) => ({ locale }));
}
//src\app\[locale]\(home)\page.tsx
import { Suspense } from 'react';
import { Skeleton } from '../components/layout/skeletons';
import ServerComponent from './components/banners/';
export default function Home() {
return (
<main className="flex flex-col items-center justify-between ">
<Suspense fallback={<Skeleton/>}>
<ServerComponent/>
</Suspense>
</main>
);
}