-
-
Notifications
You must be signed in to change notification settings - Fork 762
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Next dynamic routing is incompatible with next-i18next's Link #413
Comments
We've faced the same problem. The root cause I think is that it uses incorrect router on frontend side. And it fails during So i18next should override client side |
The I believe this is related to vercel/next.js#7488. Here's some JSX that causes the error, within a <Link href='/post/[id]' as='/post/second'>
<a>Second Post</a>
</Link> With
However, this doesn't appear to be specifically related to <Link href='/post/[id]' as='/en/post/second'>
<a>Second Post</a>
</Link> You will see the exact same error. Not sure what to say, except that we might need to drop |
Actually those "modifications" of props cause an error. As a result of such modifications we receive something like this in On the other hand next-i18next modifies such urls on backend (ssr) side with middleware: https://github.com/isaachinman/next-i18next/blob/master/src/middlewares/next-i18next-middleware.js#L63 And I don't see any reason why it's not done in the same way on client side. I think it should be possible hook next's link |
As I said, try hardcoding the values you'd expect directly into a If you have some idea for a PR, feel free to open a draft to more clearly explain your idea. |
Can anyone suggest any workarounds here ? |
I ended up using |
I've simply made my own simple Link that wrapps next's Link, and does not take language off, but prepends '[lang]/' to the href, and I also have [lang] folder in root of my project. I also had to change middleware so that it does not cut language part off URL.
|
We worked around this issue by using this library: Comprised of a few pieces: 1)
|
Calling i18n.changeLanguage(foo) in dynamic page also not working properly. The language is changed but the url is not. |
@vimutti77 That might be a separate issue. Any client side calls to |
This is more or less a deal breaker as it is right now. This makes all the usefulness of this approach to i18n really limited to static routes. Is there a recommended workaround that does not involve duplicating the entire site by hand for each language? Thanks. |
@RafaPolit This problem occurs when users:
Essentially, the two are mutually exclusive due to a limitation on the NextJs side of things. Please do feel free to have a look at the implementation here and see if you can come up with a creative fix. In general, if people want to see this implemented, the most helpful thing to do is make some noise over in the NextJs repo. |
This is a huge deal breaker and should be stated in the first lines of the readme. 🤦♂ |
@oswaldoacauan Feel free to relay your frustrations to the NextJs team. Not sure if it's a "deal breaker", as there are no other prebuilt options that I'm aware of. There are workarounds posted above. |
@isaachinman for sure I will. Anyway I think a warning or pin this issue is not a bad call. Anyway good work. I will try to find a workaround and update here if I succeed :) |
This might be a bit hacky, but it's a pretty simple workaround and works for me. Have your folder structure like this:
Write your code in
Then, use i18n's Link component just like this:
Client-side navigation & SSR 🎉 |
First i retrieve current locale:
After that i'm passing the current locale to link and its working for me:
All working fine in dev mode, but when i try to deploy to NOW its crashing with error:
Detal log:
|
Thanks @vimutti77. Can anyone confirm if the issue is resolved with Next v9.2.1? |
@isaachinman I'm having the same issue in v9.2.1 |
Trying with @LotharVM solution I get it working, but with a page reload. |
I can confirm that it is working now in next v9.2.1. @eduludi you need to supply query params to your href. e.g.
or
|
Thanks @vimutti77! It works like a charm! |
I've tried the solutions that @vimutti77 and @mattboon suggested, but unfortunately when I link to dynamic routes, I still get a page refresh. This only happens on dynamic routes |
For dynamic routes using the Link component just do:
With that it will avoid the page refresh and it will also avoid showing errors on consoles that can't pre-load the website. |
@michaelmota Are you using Link from I even modified my custom server like this, as per the docs:
|
@GainorB There's no need to add the route on the custom express server since Next handles that for you. But try this: I customized the express server adding the next-i18next middlewares like so:
After this is done on the server create a new i18n.js on your root directory with something like this:
And then just import the Link component from here and use as you normally would, or as mentioned before. Like |
@michaelmota Thanks for your responses. This is exactly what I am doing, as you suggested. server.ts
i18n.ts
Link.ts
Get's passed these values, as an example"
|
That's weird. I remember I used to have that problem but it worked with what I mentioned before but it seems like you've done it right. The only thing left to see is check the version you have on next, i18next and next-i18next and if it's not updated try updating it to the latest version and test it again to see if it's working correctly. Here's a part of my custom express server.
|
Here is our "not so hacky" approach: const pathJoin = (...parts: string[]) => parts.join("/").replace(/\/+/g, "/");
const LocaleLink = ({ as, href, ...props }) => {
const {
i18n: {
language,
options: { localeSubpaths },
},
} = useTranslation();
const lang = Object.values(localeSubpaths).includes(language) ? language : "";
const withAbsolute = href.substr(0, 1) === "/" ? "/" : "";
return <Link {...props} href={pathJoin(withAbsolute, lang, href)} as={as} />;
};
const MyComponent = () => {
return (
<LocaleLink href="/just-some-dir/[slug]" as={`/just-some-dir/${slug}`} passHref>
<a>It just works</a>
</LocaleLink>
);
} This will
No need to add extra directories or other hacks. Maybe this can be added to this lib? @isaachinman what do you think? (I can open a PR for it) |
@pixelass If you can extend the existing |
@isaachinman I built this HOC on top of the Link provided by this lib, so yes I can either extend the existing Link component or add a new dedicated component instead. Personally I think extending the the existing Link component would make sense since it's backwards compatible. |
@pixelass We would want to extend the existing component, and we would need unit tests and most likely e2e tests as well. |
@pixelass Since you seem to be having a look around, just be aware that we've got utils like |
Sadly my HOC does not work as expected. Looks like we won't be able to use this library afterall |
The way we fixed this is by not using the route prefix feature and actually implementing it ourselves. We have just a small middleware and all our routes look like |
@pixelass Can I offer any assistance? What didn't work? |
@isaachinman we have a rather complicated setup so while it's very nice to offer help we will have to figure this one out ourselves (I'm currently in discovery of our project-setup). tldr; The HOC didn't work, it was causing a server-side render instead of client-side. I think right now the solution from #413 (comment) or #413 (comment) should work. ... Context Example
I might look into it some other time but right now I'm not sure if we can use this library (which is not due to this library but our url-logic) |
We have the same setup and you can use this lib but you will not be able to
use the he localeSubpath option and you will also need to write your own
language switcher component that is aware of the new slug for the new
language.
…On Mon 27. Jul 2020 at 17:00, Gregor Adams ***@***.***> wrote:
@isaachinman <https://github.com/isaachinman> we have a rather
complicated setup so while *it's very nice to offer help* we will have to
figure this one out ourselves (I'm currently in discovery of our
project-setup).
*tldr;*
The HOC didn't work, it was causing a server-side render instead of
client-side.
I noticed this while digging into the code of next-i18next. I tried fixing
this within
https://github.com/isaachinman/next-i18next/blob/master/src/utils/lng-path-corrector.ts#L42
and then realized that the issue can't be fixed with my approach. Let's
just say: "I was tired and overworked when I wrote all those comments".
I think right now the solution from #413 (comment)
<#413 (comment)>
or #413 (comment)
<#413 (comment)>
should work.
...
...
*IN DETAIL*
*Context*
Our urls are fully localized so even switching the language causes
complications since the english page doesn't know the urls of the other
languages and simply switching the subpath will not work.
*Example*
- https://example.com/en-US/this-is-an-example/with-a-slug
- https://example.com/de-DE/dies-ist-ein-beispiel/mit-einem-slug.
- https://example.com/[subpath]/example/[slug]. ("example" is mapped
to the language specific dir but the slug is delived from the CMS and
therefore unknown)
I might look into it some other time but right now I'm not sure if we can
use this library (which is not due to this library but our url-logic)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#413 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJVWJRWEEBE5PVJQGGT6TDR5WJBDANCNFSM4IFXIRLA>
.
|
(Repo: https://github.com/marteloge/inktemplate)
I have imported
I guess it is related to the same issue with Link as described in this ticket. This kinda works but it throws a 404 before properly navigating:
How it should work according to NextJS (?):
Am I doing something wrong? |
Seems like this worked:
Should I update the README to say something about dynamic routes? |
@marteloge You can see how we wrap the |
I just upgraded to:
And refactored my next-18next implementation from removing the additions to the custom server to use rewrites in next.config.js, and all of my links start working without the hard reloading!! |
Anyone using |
I've just used now and it works perfect. |
It works fine on production mode also. |
Hi there, I have just released |
Describe the bug
I tried to use dynamic routing from Next.js with next-i18next. I imported
Link
from NextI18Next instead ofnext/link
and it causes the error saying:Your
's
asvalue is incompatible with the
hrefvalue. This is invalid.
What I tried:
as
property to Link as well as remove itDoes any one have the same issue?
Occurs in next-i18next version
next-i18next version: 0.50.0
Steps to reproduce
I set up a minimal repository here:
https://github.com/lazidoca/dynamic-routing-next-i18next-app
Expected behaviour
You must provide a clear and concise description of what you expected to happen.
OS (please complete the following information)
The text was updated successfully, but these errors were encountered: