Multilang query in NextJS?

Developing with Prismic
1

Hello,

I am currently using Nextjs & slicezone on my project, and I would like to have an additional language in the project. I am struggling to find any relevant documentation concerning useGetStaticProps & useGetStaticPaths, where exactly would I need to fetch the language information for nextJs to build my paths correctly and fetch the data?

The content of my [uid].js

Currently added en-US, which works, but it works on every route. Any tips?

export const getStaticProps = useGetStaticProps({
  lang: 'en-US',
  client: Client(),
  uid: ({ params }) => params.uid,
});

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: 'page',
  fallback: process.env.NODE_ENV === 'development' && true, // this will fallback to 404 on production
  formatPath: ({ uid }) => ({ params: { uid } }),
});

Thanks,

Best

2

Hello David, thanks for reaching out!

I recommend you look at this sample multi-language project with Prismic and Next.js. It's compatible with Next 10, which introduces support for Internationalized Routing and allows you to setup Translations and Routing!

Basically, with this setup, Next.js will make the locales available in the context of your pages. That way, you can query your documents by language, and then you can implement your dynamic paths with a helper function, look at how we do that here.

4

Thanks for your answer, this helped !

As an FYI, I mentioned next-slicezone the example doesn't have examples, in order to make it work with the SliceZone component from Next-slicezone, you will need to create a registry with createRegistry and feed it to the props.

1 Like
5

This issue has been closed due to inactivity. Flag to reopen.