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

lynn1286 · 2023-05-06T16:31:39Z

What version of this package are you using?

iShot_2023-05-07_18.02.30.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 · 2023-05-11T12:58:35Z

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 · 2023-05-11T12:59:58Z

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

lynn1286 · 2023-05-12T03:37:34Z

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 · 2023-05-12T05:57:28Z

@lynn1286
Now, Is it work?

povilaspin · 2023-05-12T06:24:41Z

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

ValentineSokol · 2023-05-16T11:17:30Z

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

lynn1286 · 2023-05-17T13:49:05Z

@lynn1286 Now, Is it work?

😫 No

lynn1286 · 2023-05-17T13:51:28Z

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 · 2023-05-17T13:53:40Z

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 · 2023-05-17T14:53:12Z

Related with this one: aralroca/next-translate-plugin#21

l-you · 2023-05-18T15:30:11Z

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 · 2023-05-19T11:16:58Z

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 · 2023-05-25T09:48:13Z

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 · 2023-06-01T09:53:00Z

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

nagman · 2023-06-01T13:56:58Z

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 · 2023-06-01T14:12:02Z

@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 · 2023-06-01T14:29:20Z

After some tests, I can confirm that [email protected] works with next until 13.3.4 and stops to work with ^13.4.0

aralroca · 2023-06-01T16:05:01Z

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

nagman · 2023-06-01T16:05:57Z

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

aralroca · 2023-06-02T08:05:07Z

@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 · 2023-06-02T08:18:53Z

@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 · 2023-06-05T21:51:40Z

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

nagman · 2023-06-07T08:37:24Z

@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 · 2023-06-07T08:42:33Z

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

aralroca · 2023-06-07T08:51:58Z

@nagman sounds good then 😊 I think currently there is an issue with client components commented here aralroca/next-translate-plugin#22 (comment) but happy that at least now works better than before.

nagman · 2023-06-07T09:04:21Z

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 · 2023-06-08T20:39:11Z

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 · 2023-06-10T17:57:28Z

@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 · 2023-06-10T19:54:54Z

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 · 2023-06-10T20:26:40Z

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

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
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 [email protected]
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 · 2023-06-11T13:34:21Z

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 · 2023-06-11T14:05:21Z

@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 · 2023-06-11T14:30:35Z

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

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
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 [email protected]
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 · 2023-06-11T18:45:37Z

@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 · 2023-06-11T19:37:17Z

@aralroca Will this PR fix this?

aralroca · 2023-06-11T20:00:26Z

@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 · 2023-06-11T20:14:29Z

@aralroca Is this the core Next.js bug?

aralroca · 2023-06-12T04:26:13Z

@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.

next-translate/examples/with-app-directory/package.json

Line 16 in 5a5f2d2

"next": "13.2.0",

aralroca · 2023-06-15T12:36:36Z

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

aralroca · 2023-06-16T14:18:57Z

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 · 2023-06-16T14:23:52Z

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 · 2024-03-12T15:20:44Z

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😭.

lynn1286 closed this as completed May 7, 2023

lynn1286 reopened this May 7, 2023

lynn1286 changed the title ~~In next version 13.4.0 app directory, next - translate doesn't work~~ In next version 13.4.0 app directory, next-translate doesn't work May 7, 2023

aralroca mentioned this issue Jun 8, 2023

add hoc to fix client components in next-translate-plugin #1061

Merged

aralroca mentioned this issue Jun 11, 2023

add tests and some improvements aralroca/next-translate-plugin#29

Merged

This was referenced Jun 16, 2023

support /[lang] dynamic route aralroca/next-translate-plugin#36

Merged

update appdir example and upgrade dependencies #1070

Merged

aralroca closed this as completed Jun 16, 2023

hydRAnger mentioned this issue Jul 5, 2023

About tradeoff between 2.3.0 and 2.4.x aralroca/next-translate-plugin#58

Closed

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

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

Comments

lynn1286 commented May 6, 2023 • edited Loading

aralroca commented May 11, 2023 • edited Loading

aralroca commented May 11, 2023

lynn1286 commented May 12, 2023

ekhishigee commented May 12, 2023

povilaspin commented May 12, 2023

ValentineSokol commented May 16, 2023

lynn1286 commented May 17, 2023

lynn1286 commented May 17, 2023

lynn1286 commented May 17, 2023

aralroca commented May 17, 2023

l-you commented May 18, 2023 • edited Loading

aralroca commented May 19, 2023

superhorsy commented May 25, 2023 • edited Loading

sandrooco commented Jun 1, 2023

nagman commented Jun 1, 2023

superhorsy commented Jun 1, 2023 • edited Loading

nagman commented Jun 1, 2023

aralroca commented Jun 1, 2023

nagman commented Jun 1, 2023

aralroca commented Jun 2, 2023

nagman commented Jun 2, 2023 • edited Loading

aralroca commented Jun 5, 2023 • edited Loading

nagman commented Jun 7, 2023

nagman commented Jun 7, 2023

aralroca commented Jun 7, 2023

nagman commented Jun 7, 2023

aralroca commented Jun 8, 2023

Gyurmatag commented Jun 10, 2023

aralroca commented Jun 10, 2023 • edited Loading

Gyurmatag commented Jun 10, 2023 • edited Loading

qtnx commented Jun 11, 2023

aralroca commented Jun 11, 2023

qtnx commented Jun 11, 2023

Gyurmatag commented Jun 11, 2023 • edited Loading

Gyurmatag commented Jun 11, 2023 • edited Loading

aralroca commented Jun 11, 2023

Gyurmatag commented Jun 11, 2023

aralroca commented Jun 12, 2023

aralroca commented Jun 15, 2023

aralroca commented Jun 16, 2023

aralroca commented Jun 16, 2023

yucheng-Li commented Mar 12, 2024

lynn1286 commented May 6, 2023 •

edited

Loading

aralroca commented May 11, 2023 •

edited

Loading

l-you commented May 18, 2023 •

edited

Loading

superhorsy commented May 25, 2023 •

edited

Loading

superhorsy commented Jun 1, 2023 •

edited

Loading

nagman commented Jun 2, 2023 •

edited

Loading

aralroca commented Jun 5, 2023 •

edited

Loading

aralroca commented Jun 10, 2023 •

edited

Loading

Gyurmatag commented Jun 10, 2023 •

edited

Loading

Gyurmatag commented Jun 11, 2023 •

edited

Loading

Gyurmatag commented Jun 11, 2023 •

edited

Loading