In next version 13.4.0 app directory, next-translate doesn't work

[lynn1286]

What version of this package are you using?

https://user-images.githubusercontent.com/40122311/236671029-586f2f6c-d4a5-4748-910e-a99adf2258c4.mp4

What happened? The latest version of NextJs, international routing 404 💔

codesandbox code https://codesandbox.io/p/sandbox/next-translate-app-dir-forked-vp5r4n?file=%2FREADME.md

What did you expect to happen? hope to get help ，Thanks 🫡

[aralroca]

You need to add experimental.appDir in next.config.js file meanwhile we don't change on next-translate-plugin the way to detect app folder

[aralroca]

BTW; contributions in next-translate-plugin are very welcome 😊

[lynn1286]

You need to add experimental.appDir in next.config.js file meanwhile we don't change on next-translate-plugin the way to detect app folder

Yes, I have set experimental.appDir = true

[ekhishigee]

@lynn1286 Now, Is it work?

[povilaspin]

It does not work with next config for experimental appDir, you can check it out in the original sandbox attached in this issue.

[ValentineSokol]

For me it worked with the experimental.appDir setting on v.13.4.2

[lynn1286]

@lynn1286 Now, Is it work?

😫 No

[lynn1286]

For me it worked with the experimental.appDir setting on v.13.4.2

I tried using 13.4.2 , still doesn't work ， Can you provide a codesandbox demo ☺️ ?

[lynn1286]

It does not work with next config for experimental appDir, you can check it out in the original sandbox attached in this issue.

Does it mean I can't use the Nextjs app directory 🥶

[aralroca]

Related with this one: https://github.com/aralroca/next-translate-plugin/issues/21

[l-you]

Does not work. NextJs 13.4.2 + next-translate@^2.0.5 + next-translate-plugin@^2.0.5 No translation for app and pages routes.

[aralroca]

The fix with the last version of Next.js + supporting pages and app together is under a PR by @alvesvin.

You are going to have access soon in the next release 😊. Meanwhile, you can activate experimental.appDir again to use translations only inside app...

[superhorsy]

I can confirm that generally plugin works with:

experimental: { appDir: true },

configuration for server components.

But for client component right now I am stuck with following issue: When I am using "useTranslate" in component with "use client" directive the { lang } is empty, which lead to React hydration error: "Text content does not match server-rendered HTML." I wonder if I can somehow pass language to client component.

Could you recommend something here?

I am a bit new to Next.js so maybe I should have configured language somehow. Right now my config matches the provided example.

[sandrooco]

@superhorsy I also have the problem that lang is empty (an actual empty string), could you find a solution yet?

[nagman]

Just after upgrading next from 13.3.0 to 13.4.4, the next-translate plugin doesn't work anymore. I'm using the pages mode.

[superhorsy]

@superhorsy I also have the problem that lang is empty (an actual empty string), could you find a solution yet?

Hello @sandrooco , In the end, I didn't find the solution to that and migrated to using next-intl, which works great.

But while I did that I realized that maybe for next-translate to get locale with app router, you need to use [lng] folder as a wrapper of your routes (I didn't do that). Here is official example. I didn't test that but I think it should work with next-translate.

[nagman]

After some tests, I can confirm that next-translate@2.0.6 works with next until 13.3.4 and stops to work with ^13.4.0

[aralroca]

@nagman as a workaround you need to add again the experimental.appDir = true

[nagman]

@aralroca even if I don't use the app dir?

[aralroca]

@aralroca even if I don't use the app dir?

No, in this case, should work, is not working in your case? 🤔 @nagman can you provide more info about your error? Thanks

[nagman]

@aralroca Yes but there's not much to say. I'm using the pages dir, and it worked perfectly until I did the update of next from 13.3.0 to 13.4.4. I've then tried the intermediary versions (13.3.3, 13.3.4, 13.4.0...), and it stopped working at the minor release (13.4.0). No error in the console nor in the terminal. Just stopped working. I've tried replacing the i18n.js by i18n.json, but no more luck. And I upgraded next-translate from 2.0.5 to 2.0.6, but no change.

EDIT: of course, I've restarted next at each change, and I even deleted the .next folder, thinking that it could be a cache issue. Still no change.

[aralroca]

Try next-translate-plugin 2.3.0-canary.2 prerelease please 🙏

[nagman]

@aralroca I just updated it to the canary 2 version, and it still doesn't work:

"next": "^13.4.4",
"next-translate": "^2.0.6",
"next-translate-plugin": "^2.3.0-canary.2"

[nagman]

Oh! My bad, it does work! Sorry for the confusion, I wasn't looking at the correct website 🤦‍♂️ Thanks!

[aralroca]

@nagman sounds good then 😊 I think currently there is an issue with client components commented here https://github.com/aralroca/next-translate-plugin/pull/22#issuecomment-1579507387 but happy that at least now works better than before.

[nagman]

I don't see any issue with client components (at least with the pages directory - maybe the other thread is talking about the app directory)

[aralroca]

New fixes in next-translate-plugin and next-translate (both with the same version) 2.3.0-canary.3 prerelease. Feedback will be very welcome 🙏😊

[Gyurmatag]

@aralroca Still got this 404 error with these: "next": "13.4.4", "next-translate": "2.0.6", "next-translate-plugin": "2.3.0-canary.3"

Can you please fix this? I need this in a couple of days in production. :)

[aralroca]

Try this @Gyurmatag:

"next": "13.4.4",
-"next-translate": "2.0.6",
+"next-translate": "2.3.0-canary.3"",
"next-translate-plugin": "2.3.0-canary.3"

next-translate-plugin v.2.3.0-canary.3 needs new code inside next-translate v2.3.0-canary.3, so is normal that doesn't work with different versions.

[Gyurmatag]

@aralroca I tried that. I've got this when npm install:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: fest-face@0.1.0
npm WARN Found: next-translate@2.0.6
npm WARN node_modules/next-translate
npm WARN   next-translate@"2.3.0-canary.3" from the root project
npm WARN   1 more (next-translate-plugin)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer next-translate@">= 2.0.0-canary.1" from next-translate-plugin@2.3.0-canary.3
npm WARN node_modules/next-translate-plugin
npm WARN   dev next-translate-plugin@"2.3.0-canary.3" from the root project

Also I've got 404 in local and my build fails in production on Vercel... Can you please help me?

[qtnx]

For me, it seems to work only for pages.

I even installed next-translate and next-translate-plugin to 2.3.0-canary.3, and set appDir to true in the experimental settings.

However, it appears to only load the pages folder, not the app folder. I'm searching for guidance to configure the loader for both pages and appDir.

I've attempted to replace pages with app, and tried adding both, but neither of these approaches worked.

[aralroca]

@qtnx @Gyurmatag please would be very useful if you provide a repo with this problem to help us to detect what is happening.

@Gyurmatag feel free to contribute if you are in a hurry. I'm currently traveling for work and I need to prepare for some talks and is hard for me to take time, I'll try it, but I can't promise you.

[qtnx]

@aralroca I tried that. I've got this when npm install:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: fest-face@0.1.0
npm WARN Found: next-translate@2.0.6
npm WARN node_modules/next-translate
npm WARN   next-translate@"2.3.0-canary.3" from the root project
npm WARN   1 more (next-translate-plugin)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer next-translate@">= 2.0.0-canary.1" from next-translate-plugin@2.3.0-canary.3
npm WARN node_modules/next-translate-plugin
npm WARN   dev next-translate-plugin@"2.3.0-canary.3" from the root project

Also I've got 404 in local and my build fails in production on Vercel... Can you please help me?

@Gyurmatag I'm using Yarn and haven't encountered that issue.

@qtnx @Gyurmatag please would be very useful if you provide a repo with this problem to help us to detect what is happening.

@Gyurmatag feel free to contribute if you are in a hurry. I'm currently traveling for work and I need to prepare for some talks and is hard for me to take time, I'll try it, but I can't promise you.

Great. Thank you. I'm also working around trying to resolve it. If cannot I will give more context.

[Gyurmatag]

@qtnx @Gyurmatag please would be very useful if you provide a repo with this problem to help us to detect what is happening.

@aralroca Here is the repo with the problem.

[Gyurmatag]

@aralroca Will this PR fix this?

[aralroca]

@Gyurmatag no, some improvements but is not fixing your bug. I investigate it a little bit and looks a bug in Next.js core, because the middleware is not working well and is not related to the next-translate-plugin. Disabling the plugin, the same 404 page is happening:

next.config.js

// /** @type {import('next').NextConfig} */
// const nextTranslate = require("next-translate-plugin");
// module.exports = nextTranslate({
//   experimental: { appDir: true },
// });

module.exports = {
  i18n: {
    locales: ['en', 'hu'],
    defaultLocale: 'hu',
  },
  experimental: { appDir: true },
}

And the example of the middleware is from Next.js docs:

https://nextjs.org/docs/app/building-your-application/routing/internationalization

Probably we need a better way to handle this inside the middleware

[Gyurmatag]

@aralroca Is this the core Next.js bug?

[aralroca]

@Gyurmatag It looks like this. If you are in a hurry, I recommend you to temporarily downgrade Next.js until this bug is fixed. In the example we have in the repo is with version 13.2.0 of Next.js and works fine.

https://github.com/aralroca/next-translate/blob/5a5f2d21e28d6c1e68c0fef4b84e01ca87d48143/examples/with-app-directory/package.json#L16

[aralroca]

In Next.js v13.2.5-canary.7 was working fine, but in 13.2.5-canary.8 stop working.

[aralroca]

I have made a PR to support /[lang] dynamic routing in an easy way.

You can try it with these versions:

• next-translate - version 2.3.0-canary.3
• next-translate-plugin - version 2.3.0-canary.6

Things to keep in mind:

• The pages defined inside i18n.js will have to be updated by adding the /[lang] in front of them.
• No middleware would be needed, unless you want to control a redirect.
• You have to put all current /app pages inside /app/[lang].

I updated the example of next-translate working with /app/[lang] and Next.js 13.4:

https://github.com/aralroca/next-translate/blob/2078477ec299d1287cc20d5245e3781554a1ac39/examples/with-app-directory/

[aralroca]

both ways now are supported (?lang= or /[lang]), but the way using ?lang= needs middleware to do the rewrite and as of Next.js 13.3 it no longer works well, so I've added a second option for people to use until the issue is resolved by the Next.js team.

[yucheng-Li]

Try next-translate-plugin 2.3.0-canary.2 prerelease please 🙏

I have a same problem that fixed it by this way😊. This problem has been troubling me for an entire night😭.