Skip to content
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

(docs): update i18n-routing.md #33123

Merged
merged 3 commits into from Feb 6, 2022
Merged

(docs): update i18n-routing.md #33123

merged 3 commits into from Feb 6, 2022

Conversation

ehowey
Copy link
Contributor

@ehowey ehowey commented Jan 10, 2022

The recommended code for _middleware.ts does not work in prod, but does work locally. You need to use request.nextUrl.pathname to properly redirect from what I can tell. You also need to have a quick helper function to strip off the /default locale at the start of the pathname as we are providing /en as a fallback locale.

FWIW - I am pretty new to NextJS. Someone with more experience should probably review this suggestion before merging it. What I can tell you however is that the code as it is in _middleware.ts works locally but breaks in prod. To test this out use the code and navigate to https//www.mysite.com - it will work as expected on the root url, as this matches nextUrl.href. Now try navigating to https//www.mysite.com/about and you will be redirected to https://www.mysite.com/en/https://www.mysite.com/about.

Documentation / Examples

  • Make sure the linting passes by running yarn lint

Closes: #33762

The recommended code for `_middleware.ts` does not work in prod, but does work locally.  You need to use `request.nextUrl.pathname` to properly redirect from what I can tell.  You also need to have a quick helper function to strip off the `/default` locale at the start of the pathname as we are providing `/en` as a fallback locale.

FWIW - I am pretty new to NextJS.  Someone with more experience should probably review this suggestion before merging it.  What I can tell you however is that the code as it is in `_middleware.ts` works locally but breaks in prod.  To test this out use the code and navigate to `https//www.mysite.com` - it will work as expected on the root url, as this matches `nextUrl.href`.  Now try navigating to `https//www.mysite.com/about` and you will be redirected to `https://www.mysite.com/en/https://www.mysite.com/about`.
@ehowey
Copy link
Contributor Author

ehowey commented Jan 11, 2022

I was having trouble finding the related issue unfortuntately but there is a long discussion of this - having read that I think probably the correct fix would be without the stripDefaultLocale function I have in my code.

Maybe just pointing out this error in the docs so someone else can toss the fix in there.

Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

@kodiakhq kodiakhq bot merged commit 6890e3f into vercel:canary Feb 6, 2022
@ehowey
Copy link
Contributor Author

ehowey commented Feb 6, 2022

Thanks for the PR!

No problem - I am not sure how resilient that stripDefaultLocale function I put in there is. I wanna take another quick look at this and see if I have some cleaner code. I have been working with middleware quite a bit the last month!

@ijjk
Copy link
Member

ijjk commented Feb 6, 2022

Instead of using a regex we could do str === '/default' ? '/' : str.startsWith('/default/') ? str.substr(8) : str which is similar to the locale cleaning we do in the client router here although the regex is alright besides the pathname edge case of /default-some-value instead of /default/some-value

natew pushed a commit to natew/next.js that referenced this pull request Feb 16, 2022
The recommended code for `_middleware.ts` does not work in prod, but does work locally.  You need to use `request.nextUrl.pathname` to properly redirect from what I can tell.  You also need to have a quick helper function to strip off the `/default` locale at the start of the pathname as we are providing `/en` as a fallback locale.

FWIW - I am pretty new to NextJS.  Someone with more experience should probably review this suggestion before merging it.  What I can tell you however is that the code as it is in `_middleware.ts` works locally but breaks in prod.  To test this out use the code and navigate to `https//www.mysite.com` - it will work as expected on the root url, as this matches `nextUrl.href`.  Now try navigating to `https//www.mysite.com/about` and you will be redirected to `https://www.mysite.com/en/https://www.mysite.com/about`.



## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

Closes: vercel#33762

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants