Prismic preview using i18next

Developing with Prismic
1

Hello,

I have set the preview mode using nextjs, and it all worked out okay. Recently, we started using i18next for some translations we don't need in prismic, so our getStaticProps looks like:

export const getStaticProps: GetStaticProps<Props, Query> = async ({
  preview = false,
  previewData = {},
  params,
  locale,
}) => {
  if (!params?.uid) {
    return Promise.reject('params are mandatory');
  }

  const cli = Client();
  let lang = localeToPrismic(locale);

  const { ref } = previewData as { ref: string | number | string[] };

  const [topnav, doc, cta, footer, cookies, translations] = await Promise.all([
    cli.getSingle('top_navigation', {
      ref,
      lang,
    }),
    cli.getByUID('page', params.uid, {
      ref,
      lang,
    }),
    cli.getByUID('cta', 'cta', {
      ref,
      lang,
    }),
    cli.getByUID('footer', 'footer', {
      ref,
      lang,
    }),
    cli.getByUID('cookies', 'cookies', {
      ref,
      lang,
    }),
    serverSideTranslations(locale ? locale : 'en', ['common', 'pricing']),
  ]);
  return {
    props: {
      topnav,
      doc,
      cta,
      footer,
      cookies,
      ...translations,
      preview,
    },
    revalidate: 1,
  };
};

For all the pages that have the ...translations variable, the prismic preview returns a 500, all the others work perfectly okay.

Do you have any clue what it could be?

Thanks in advance,
Mariana

3

Hi Marina,

Sorry about the delay in the reply.

My guess here might be that your locale code here doesn't match the locale code in your Prismic repository,

Can you confirm this?

Thanks.

4

Hello!

Thanks for the reply.

What do you mean by not matching? The only difference is the zoning.

locale is en or ge and lang which is being used here:

let lang = localeToPrismic(locale);

cli.getSingle('top_navigation', {
      ref,
      lang,
    }),
...

is en-us and de-de. Should this match?

Thanks.

5

That's correct, en or ge need to match en-us and de-de.

So if you're querying a document from Prismic with the code en-us but you send the code en you're going to get an error.

Or is there something I'm missing?

Can you:

  1. Show me your i18n file?
  2. Provide me with your repo URL?

Thanks.

6

Hey!

I am not sending the en code, I am sending en-us to prismic. Only throughout my code I use en.

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
};
  1. https://flair.prismic.io

Thank you for the help!

7

OK, thanks.

What's strange here is that I would expect if the i18n is breaking the previews then it would also break the normal page queries.

I need some more information:

  1. Are you testing this locally or on the deployed website?
  2. Are you trying to query documents that have never been published? because the 500 error would suggest to me the preview system isn't being triggered on the api/preview route.

Thanks.

8

Hey!

  1. Both. But when locally, the preview works fine. It's just when it's deployed that returns a 500 if that page is using i18n. (It's deployed through vercel)
  2. No. They are published.

Thanks!

9

Are you seeing any other errors in the browser console?

Do you have this project in a Github repo?

10

No, just the 500

image
image1917×923 70.5 KB

Perhaps you can access this example: prismic.io Preview

Yes it's on a Github repo.

13

Hello @marketing5, we used the link you shared and the site renders just fine with this route: About us | flair.hr
Are you still having this issue?

14

But, that's not the preview. The site renders fine, the issue is the prismic preview on production does not work for the pages that have i18n-next translations.

Thanks.

15

I see, thanks for the clarification. Do you see any errors appear in the console? Maybe if you build, serve the site and preview locally again you can find the root of the problem before deploying again. Translation paths should not be a limitation for viewing drafts of a document in Prismic.

16

How is your routing handled in Vercel? Do you have any special set up for i18n and vercel?

17

Hello,

No, all the configuration is within the code.

Thanks.

18

Can you show us what your link resolver looks like?

19 
export const getPathnameFromType = (type: string) => {
  switch (type) {
    case 'legal':
      return '/legal/';
    case 'resource':
      return '/resources/';
    case 'blog_post':
      return '/blog/';
    case 'industry':
      return '/industries/';
    default:
      return '/';
  }
};

export const linksResolver = (doc: any): string => {
  if (doc.link_type === 'Web') {
    return doc.url;
  }

  const pageLang = langFromPrismic(doc.lang);
  const slug = doc.uid || (doc.slugs ? doc.slugs[0] : doc.slug);

  if (slug !== 'home') {
    return `/${pageLang}${getPathnameFromType(doc.type)}${slug}`;
  } else {
    return `/${pageLang}`;
  }
};
20

Are you able to correctly generate all the URLs you're setting up with the Link Resolver?
Could you share with us the zip file of your project?
We would like to be able to reproduce the use case on our end.