404 errors on pages served from app on Vercel environment

[markky21]

What version of this package are you using? "next-translate": "2.3.1", "next-translate-plugin": "2.3.0"

What operating system, Node.js, and npm version? node 18 on vercel

What happened? dynamic routes (that exist on app directory) throws 404 only on vercel environment but not in production build served locally. What is interesting, when you remove nextTranslate plugin form next.comfig.js file translation is still working ( :o ) and there is no 404 error on dynamic pages.

Please check reproduction in this repository: https://github.com/markky21/nextjs-13-next-translate-issue.git and read README file. The deployed app versions are here: main : https://nextjs-13-git-main-markky21.vercel.app/ without-next-translate : https://nextjs-13-git-without-next-translate-markky21.vercel.app/

What did you expect to happen? all pages served from app directory should not serve 404

Are you willing to submit a pull request to fix this bug?

[aralroca]

nextTranslate plugin a part of loading namespaces for each page is using the i18n routing from the Next.js core. Can you try to remove the plugin but adding this i18n configuration if is related to this?

// next.config.js
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

Thanks

[aralroca]

Can be related with this one? https://github.com/vercel/next.js/issues/48812

[markky21]

Forgive me, but I don't fully understand what you are proposing I should do. I have created a branch with the changes I think you have proposed to me. The translation on the home page does not work (pages) commit -> https://github.com/markky21/nextjs-13-next-translate-issue/compare/main...next-translate-fixes deploy -> https://nextjs-13-git-next-translate-fixes-markky21.vercel.app/

[markky21]

@aralroca I thing it's a different issue -> https://github.com/aralroca/next-translate/issues/1088#issuecomment-1607211598

[aralroca]

@markky21 it was to investigate if is from the plugin internals issue or from Next.js i18n routing (that the plugin also is using). After your feedback and looks a next-translate-plugin internals, so then probably we can fix. Then I'm going to take a look. Thanks to report it.

[aralroca]

deploy -> https://nextjs-13-git-next-translate-fixes-markky21.vercel.app/

Ahg.. After check the deployment the dynamic page still in 404 without the plugin isn't it? So then probably is not related with the next-translate-plugin and related to i18n routing...!

[aralroca]

Maybe related with this: https://github.com/vercel/vercel/issues/9827

[markky21]

But in other hand (branch: "without-next-translate" ) : https://nextjs-13-git-without-next-translate-markky21.vercel.app/ there is app without next-translate and without "i18n" property configured in next.config.js file and it's working fine, but when you add next-translate in next.config.js file there are 404 :).

Looks like issue there is when user set "i18n" in next.config.js file (maybe nextTranslate also set this?)

[aralroca]

yes, next-translate-plugin is adding the i18n routing configuration and is required to work fine the redirects to the default locale.

[Ayterx]

I've been investigating this problem a month ago, and here's what I found:

• This problem is not related to next-translate, next-translate-plugin, or any other i18n library.
• This problem only occurs when deploying to Vercel; self-hosting and deploying to Netlify work fine.
• This problem arises when adding i18n: {...} to next.config.js.
• Static pages in App Router works fine, but dynamic pages/routes result in a 404 Page.

So it seems that this issue is specific to Vercel. I contacted them over a month ago, but I haven't received a clear answer yet.

Here's an issue related to this problem: https://github.com/vercel/next.js/issues/49686

[markky21]

I also have an open request in vercel support. Unfortunately they answer after a long time and work very slowly. Let's hope they release a patch quickly, because unfortunately because of this you can't use dynamic paths with translation in production with app directory... 😟

[markky21]

And we all have a problem.. I received a message of Vercel Support a while ago, in which they write:

"First, to clarify from the GitHub post (https://github.com/aralroca/next-translate/issues/1088) regarding the app router, we do not support that config with app router and is only supported with the page router. The current recommendation for internationalization with the app router is to use middleware and dynamic paths (https://nextjs.org/docs/app/building-your-application/routing/internationalization)"

That means API is not the same for app router and it will no longer works... @aralroca maybe here is a good place for your library to provide some utils to set up translation for app routes?

[aralroca]

IMO It's a bad decision on the part of Vercel. Since if it does not affect App Router it should not affect it in any way. Otherwise, it is impossible for people to do a proper migration from pages to app folder. That's why we want to keep i18n config, because a lot of people asked to support the migration from pages to app.

[aralroca]

Maybe we can detect that if you don't have pages and only app, don't put it. But there will still be people who will have the same issue. IMO should be fixed in the Next.js / Vercel part.

[tomaszzmudzinski]

It would be great if Vercel team fix this ❤️

[aralroca]

Good news, already fixed by Vercel team:

https://github.com/vercel/vercel/pull/10243