Multilang - NextJS 14 App router

Developing with Prismic
1

Hi,

I'm currently working on making my website multilingual by following the steps outlined in this post: https://prismic.io/blog/nextjs-i18n.

My website is built using the Minimal TypeScript Starter, and I have documents available in two languages (en-us as the defaultLocale and fr-fr). The UIDs for each language are consistent.

I've carefully followed all the steps mentioned in the guide, but I'm encountering a persistent issue where the requests consistently fail with a 404 error.

To provide more context and facilitate troubleshooting, I've created a branch in my public repository https://github.com/Cocola/nf-nextjs-prismic/tree/feat/i18n.

Could you please review and let me know if I'm missing something crucial in the implementation?

Best regards,

2

Hi @Nicoolas,

I took a quick look, and I was able to get your project working when I removed i18n configuration from the next.config.js file. I guess it was interfering with the setup shown in the blog post. And FYI, there is a link at the end of the blog post to the final website code that you can use for future troubleshooting. That's how I was able to find the difference in the next config file.

https://github.com/prismicio-community/prismic-i18n-tutorial/blob/42246c7db69e65b58da1e365ec25728b647ab46d/next.config.js

Give that a try, and your project should start working.

4

Hi Levi,

I found the same conclusions this morning thanks !
My IDE was not pointing the error until i fix the next.config file !
After that i was able to progress, thanks for your answer !

Best

1 Like
5

@Levi It seems that in production something is going wrong.
A request return a 500 ([GET] /?nxtPlang=en-us status=500)
a function /[lang] is returning this:

RefNotFoundError: Ref not found. Ensure you have the correct ref and try again. Master ref is: ZW2tZhAAACMA0iw_
    at Client.fetch (/var/task/.next/server/chunks/5760.js:1:13735)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Client.getFirst (/var/task/.next/server/chunks/5760.js:1:6382)
    at async Client.getByUID (/var/task/.next/server/chunks/5760.js:1:7152)
    at async Index (/var/task/.next/server/app/[lang]/page.js:1:2263) {
  url: 'https://nicolasfiascaro.cdn.prismic.io/api/v2/documents/search?q=%5B%5Bat%28document.type%2C+%22page%22%29%5D%5D&q=%5B%5Bat%28my.page.uid%2C+%22home%22%29%5D%5D&lang=en-us&pageSize=1&ref=ZV3LmxAAACYA8b39&routes=%5B%7B%22type%22%3A%22page%22%2C%22uid%22%3A%22home%22%2C%22path%22%3A%22%2F%3Alang%3F%22%7D%2C%7B%22type%22%3A%22page%22%2C%22path%22%3A%22%2F%3Alang%3F%2F%3Auid%22%7D%2C%7B%22type%22%3A%22project%22%2C%22path%22%3A%22%2F%3Alang%3F%2Fprojects%2F%3Auid%22%7D%5D',
  response: {
    type: 'api_notfound_error',
    message: 'Ref not found. Ensure you have the correct ref and try again. Master ref is: ZW2tZhAAACMA0iw_'
  }
}

image
image1920×836 129 KB

I check potential typescripts issues, no success. Any idea ?

6

@Levi @samlittlefair it seems related to Caching issue with Next.js App Router - Vercel Deployment - #26 by andre.lergier ?

7

Hi @Nicoolas,

I think it's related to that issue. Can you try to flush the cache?

8

Hi @Phil sorry for the delay. I tried with no success but after upgrading next from 14.0.1 to 14.0.4 fixed the problem.

1 Like