404 error pages with next 14

[jaisharx]

What version of this package are you using?
2.6.1
What operating system, Node.js, and npm version?
Mac, v18, v9.6.7
What happened?
404 pages with next 14
What did you expect to happen?
Pages should work as usually
Are you willing to submit a pull request to fix this bug?
Maybe

I'm using next-translate package in some of my personal project but after upgrading to next 14, all I'm seeing is 404 pages.
I've even tested it with the with-app-directory example you have in this repo by upgrading the next version in the example from 13.4.7 to 14.0.0. and the same error happens for all the routes.

[hwanam1111]

I had the same problem, so I checked with the version down and 13.4.9 works fine with this version.

Is there any way to make it work without problems in version 14?

[josetr]

13.4.12 is the latest version where next-translate still works. 13.4.13 breaks it.

[Eusebiotrigo]

Thanks for bumping the issue, I have been scratching my head with this error for like almost a week.
The only thing I have found out is that the plugin breaks it. I tested without the plugin, and of course, the library will not translate anything... but at least it does not show a 404.

[dellorogiulio]

Up for this issue.. @aralroca, any schedule to fix this?

Thanks!

[abriginets]

I'm having pretty similar issue. I moved my homepage from /app/page.tsx to /app/[lang]/page.tsx and now none of the translations work. My i18n.js is

module.exports = {
  pages: [...],
  locales: ['en', 'ru', 'uk'],
  defaultLocale: 'en',
  localeDetection: false,
};

So I tried accessing /uk, /ru and /en and I got 404. Now here's the interesting thing I accidentally found out is that if I try to navigate to locales I don't support then NextJS would actually try to render something but throws an error (obviously).

[aralroca]

I hate to say it, but I think the solution will be to remove the support for mixing pages and app router, because everything breaks adding the i18n in the Next.js configuration. I don't understand how Next.js doesn't support partial migration from pages to app router with i18n.

[rlvk94]

I hate to say it, but I think the solution will be to remove the support for mixing pages and app router, because everything breaks adding the i18n in the Next.js configuration. I don't understand how Next.js doesn't support partial migration from pages to app router with i18n.

Yeah it's quite strange that the localization config is even used when strictly using the app router, as they do not mention those configuration options in the documentation, but solely recommend the dynamic route setup with a [lang]folder.

But it would be nice with the option to use next-translate strictly with app router 🙏

[aralroca]

@rlvk94 Let's do this. We supported it because many people asked to be able to migrate from pages to app router and have both living together, but doing this feature was a bad idea because Next.js doesn't support it and so it breaks a lot of things to try to maintain this. Either you use pages folder, or you use app router... I have asked Next.js to support both, but they don't even respond.

[aralroca]

Please try Next-translate & Next-translate-plugin at the same version 3.0.0-canary.1 and confirm if now is working in your projects. Thanks!

[draco-china]

@aralroca Still not working, here is the example

[jaisharx]

@dracon-china Yeah the same, tested with the updated with-app-dir example in this repo and I'm seeing the same 404 error.

[aralroca]

Version 3.0.0-canary.1 had a problem generating the npm tarball, fixed in 3.0.0-canary.2.

[aralroca]

@aralroca Still not working, here is the example

Ok thanks for the example, I'm going to take a look

[zdychacek]

Version 3.0.0-canary.1 had a problem generating the npm tarball, fixed in 3.0.0-canary.2.

Tried 3.0.0-canary.2 version, but still doesn't work.

[jaisharx]

It seems if dashes are added to the i18n config, then the pages work. I tried with a fresh new app dir based project without any other deps than the normal create-next app needs and even if you manually add the i18n config which this lib is injecting, the pages fail with normal values like: "en", but if you replace them with "en-US" then they work.

I've opened a PR to test this out with the app example in this repo, and I can make the pages work with the new locale naming, seems like a super hacky workaround, but hey atleast they work.

PR: #1189 (Don't forget to access url directly with locale like localhost:3000/en)

[startrick]

@aralroca Hey! So I love and have used next-translate for all my previous projects. I am building the latest one on next 14. I am somehow not able to resolve 404 error. As you asked, installed 3.0.0-canary.2 but still not able to resolve the issue.
Any ideas what I can do to make it work?

I would want to stick with next-translate. If it doesn't work, which other library do you recommend?

[abriginets]

Please take a look at this issue vercel/next.js#57704 (comment)

It appears that for making it work we need to remove i18n from config and switch to middleware for pages dir. I myself haven't tried that just yet, but one can consider this answer official and proceed with the suggested changes.

[startrick]

@abriginets @aralroca I don't have i18n in my config and I am using the middleware. But I am still getting 404.
I know this might be a lot to ask but can you write a small note on step by step instructions to set up next-translate in Next 14. Would help newbies like me to quickly set up for my project.

[jaisharx]

A lot of love for the library author for maintaining such an amazing library, but given how fast next has been moving, the state of this library with next 14 is really bad. Even if 404 pages are fixed, I found not-found pages and no SSG support a big deal breaker for me (and I'm aware most of them are due to next itself). Wish you good luck for this library but I have migrated my projects to another library next-intl which works well.

I'm closing this issue and related PR as there are already other similar issues opened in the repo. Again very thanks for creating the library that worked this well with the pages directory.

[aralroca]

@jaisharx Move to the library that best suits your project. I'm aware that since November we haven't made a release yet, I will dedicate time to fix this when I can, however all PR is always welcome.