How to use Prismic localization together with next-i18next?

Developing with Prismic
, ,
1

Hi, I stumbled upon another issue when developing with Prismic.

I struggle to make these two work together. I followed the docs to set this up Multilingual Templating with Next.js - Documentation - Prismic
but I'm getting:

Error serializing `._nextI18Next.userConfig`

I followed the guide from GitHub - i18next/next-i18next: The easiest way to translate your NextJs apps. but I still cannot get it to work probably because i18n now returns a promise and I'm still getting that serializing error, has anyone encountered this issue and how can I make these two work together?

5

Hello @dmakos

Thanks for reaching out to us.

I'd recommend you follow our next.js starter project: GitHub - prismicio-community/nextjs-starter-prismic-blog: Blog project with Next.js & Prismic.

If it still doesn't work, share the project code with me in a private message. I'll take a look.

Thanks,
Priyanka

6

Hi @Priyanka
This starter is not using any translation or translation package so not sure what should I look at?

I managed to get this working by using different library.

But I have a new problem - some pages will be static and not coming from Prismic and some will be from Prismic, how would I tackle the language switcher in this scenario? How can I make language switcher without LinkResolver function and only using Route resolver?

The example in docs is only showing how to build this with LinkResolver and I struggle how to detect which page is from Prismic and which one isn't. I'd also want to stay on the same document in case of Prismic and or the same page when static while switching the language.

For example, I want to switch language like this - if I'm on blog article coming from prismic:
EN locale: /blog/this-is-article
then switching on that page using language switcher will lead me to:
DE locale /blog/das-ist-artikel

But then let's say I have one article NOT coming from prismic and it's static. How can I make language switcher detect this use case?

Ideally if I would have translated route like /bloggen/das-ist-artikel - is this even possible?

7

Never mind, I think I actually can ignore routes and use linkResolver exclusively.

export const linkResolver = (doc) => {
    if (doc.type === 'article') {
        return `/blog/${doc.uid}`;
    } else if (doc.type === 'product_feature') {
        return `/features/${doc.uid}`;
    }
    return '/';
};

// Update the routes array to match your project's route structure
/** @type {prismic.ClientConfig['routes']} **/
const routes = [];
1 Like