Best way to get static paths with dynamic routes catch all paths [...id].js and mutli locale

[aayman997]

Hello all, I was trying to use getStaticPaths in a page with dynamic route catch all paths [...id].js and my website has two langues ar and en
this is my code to create the paths array

const paths = ids.map(id => {
  return locales.map(locale => {
    return {
      params: {
        id: id.toString()
      },
      locale: locale
    };
  });
}).flat();
return {
  paths,
  fallback: 'blocking'
};

I get this error

Error: A required parameter (id) was not provided as an array in getStaticPaths for /categories/[...id]

paths generated

[
  { params: { id: '1' }, locale: 'ar' },
  { params: { id: '1' }, locale: 'en' },
  { params: { id: '2' }, locale: 'ar' },
  { params: { id: '2' }, locale: 'en' },
  { params: { id: '3' }, locale: 'ar' },
  { params: { id: '3' }, locale: 'en' }
]

I tried to switch the fallback value [true, false, blocking] but it doesn't help

the same code is working perfectly if I changes the page to dynamic route [id].js instead of catching all paths [...id].js

I found a work around but I don't know if it will be affect the performance or the SEO

it was basically wrap the id in params with [] to be array here is the code 👇🏼

const paths = ids.map(id => {
  return locales.map(locale => {
    return {
      params: {
        id: [id.toString()]
      },
      locale: locale
    };
  });
}).flat();
return {
  paths,
  fallback: 'blocking'
};

here's the paths generated

[
  { params: { id: ['1'] }, locale: 'ar' },
  { params: { id: ['1'] }, locale: 'en' },
  { params: { id: ['2'] }, locale: 'ar' },
  { params: { id: ['2'] }, locale: 'en' },
  { params: { id: ['3'] }, locale: 'ar' },
  { params: { id: ['3'] }, locale: 'en' }
]

could anyone advice me if faced the same problem before?

Thanks in advance

[valcosmos]

Recently, I used [id].tsx getStaticProps and getStaticPaths in my project, which seems to be a better choice. Pre-rendered is good for SEO, and it will be very fast.

[aayman997]

@valcosmos yes it's a good choice but I need to use [...id].js for some use-cases

[valcosmos]

Hello, I tried [...id].tsx in my project, it seems to work.

This is my code:

export const getStaticProps: GetServerSideProps = async (context) => {
  const {params} = context

// ====== Here id is an array, because my parameter is only one, so I choose the first item
  const id = params?.id[0]

  const {data} = await getPostDetail()

  if (!data) {
    return {notFound: true}
  }

  return {
    props: {
      data
    },
    // revalidate: 10
  }
}


export const getStaticPaths: GetStaticPaths = async () => {

  const {data: posts} = await getPosts()

  const ids = posts.map((post: PostInfo) => post._id)

  const pathsWithParams = ids.map((id: string) => ({params: {id: [id]}}))

  return {
    paths: pathsWithParams,
    fallback: false
  }
}

[aayman997]

Yeah I knew this solution and I wrote it in my post here it's 👇🏼

the main idea from my question is to see if anyone know if this will affect the SEO and if anyone have a better solution

[mledwards]

Good spot! 2 useful things to add:

1. if you're using the catch all path as you have multiple parts to the URL, you need to provide all URLs as an array in the params. E.g.

So if you have /team/[...id], and a URL like /team/developers/martin the params would be { params: { id: ["developers", "martin"] }

2. If you're using [[...id]] so you can catch the landing page too. E.g. /team/developers you'll need to include an empty array in the paths array too { params: { id: [] }