1

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.

levipadre
  • 569
  • 7
  • 31

0 Answers0