I try to make static export and pre-render all pages with nextjs static export feature, I have pages which need dynamic props but I got errors while compiling:
Error occurred prerendering page "/branche/agriculture-foresterie-ressources-animales-et-halieutiques/13/instituts". Read more: https://nextjs.org/docs/messages/prerender-error
Architecture of App folder
App
--- branche
--- [slug]
------ [id]
---------page.tsx
---------metiers/page.tsx
---------instituts/page.tsx
......
Institut/page.tsx
import InstitutsContainer from "@/containers/root/branche/instituts";
import { API_URL } from "@/services/api_url.services";
import { BRANCHE_DATA, BranchePageParams } from "@/types";
export const dynamic = "force-static";
async function getAllBranchesParams() {
const res = await fetch(API_URL.BRANCHE_LIST, { cache: "no-store" });
if (!res.ok) {
throw new Error("Failed to fetch branches");
}
const branches: Array<BRANCHE_DATA> = await res
.json()
.then((data) => data.branches);
// console.log(datas);
return branches.map((branch: BRANCHE_DATA) => ({
slug: branch.slug,
id: branch.id.toString(),
}));
}
export async function generateStaticParams() {
return getAllBranchesParams().then((res) => {
return res;
});
}
async function getData(brancheId: number): Promise<{ branche: BRANCHE_DATA }> {
const res = await fetch(`${API_URL.BRANCHE_DETAIL}/${brancheId}`, {
cache: "no-store",
});
if (!res.ok) {
throw new Error("Failed to fetch Instituts");
}
return res.json();
}
export default async function InstitutsPage({
params,
}: {
params: BranchePageParams;
}) {
const data = await getData(parseInt(params.id));
return <InstitutsContainer branche={data?.branche} />;
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
// reactStrictMode: false,
// swcMinify: true,
output: "export",
trailingSlash: true,
images: {
unoptimized: true,
},
};
module.exports = nextConfig;
I want to pre-render pages with static export and deploy to an apache server