In a Nextjs 13 project, using App router I have an API and it needs to fetch single posts by id. However, I want to have the name of the post in the slug instead of the id, but still access the id. Is it somehow possible?
My project structure is app/[[...slug]]/page.tsx
as every pages are coming from a CMS.
I need ID to fetch Page data.
I tried generateStaticParams, but only slug was in the params:
export async function generateStaticParams({
params
}: {
params: {
slug: string[],
id: number
}
}) {
const pages = await fetch('https://some-api.com/pages').then((res) => res.json())
return pages.map((page: any) => ({
slug: [page.url],
id: page.id
}));
}
export default async function Page({
params: {
slug,
id
}
}: {
params: {
slug: string[],
id: number
}
}) {
console.log(slug) // I get result, e.g. ["/about"]
console.log(id) // Always undefined, however id exists in the data
return (
<h1>Hello</h1>
)
}
I do have a feeling that it's not possible. I wouldn't necessarily need the id, I can actually call Page data by slug, but it's a multilingual site and I need to know which country called.
E.g. slug is /about-us/the-team
I need to know whether I need to pass uk/about-us/the-team
or it/about-us/the-team
, and the only way to find out the locale is from headers()
, but in this case it will be SSR and I need static.