fix: Avoid usePathname inconsistency in Next.js leading to a hydration error with custom prefixes, localePrefix: 'always' and static rendering
#2012
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@hugotiger is attempting to deploy a commit to the next-intl Team on Vercel. A member of the Team first needs to authorize it. |
hugotiger
changed the title
usePathname hydratione error with custom locale prefixusePathname hydration error with custom locale prefix
hugotiger
force-pushed
the
fix/use-pathname-locale-prefix-hydration-error
branch
from
56d5493 to
5e2a248
Compare
hugotiger
changed the title
usePathname hydration error with custom locale prefixusePathname hydration error with custom locale prefix
hugotiger
changed the title
usePathname hydration error with custom locale prefixusePathname hydration error with custom locale prefixes
hugotiger
changed the title
usePathname hydration error with custom locale prefixesusePathname hydration error with custom locale prefixes
hugotiger
changed the title
usePathname hydration error with custom locale prefixesusePathname hydration error with custom prefixes, localePrefix: 'always' and static rendering
hugotiger
changed the title
usePathname hydration error with custom prefixes, localePrefix: 'always' and static renderingusePathname hydration error with custom prefixes, localePrefix: 'always' and static rendering
|
@amannn I believe this PR should resolve the issue! Would love your review when you have a chance 😄 |
There was a problem hiding this comment.
Perfect fix, thanks a bunch for this @hugotiger! 🙌 I hope you found your way around in the code!
There's just a minor simplification I think we could apply here, let me know if this looks ok to you!
| } else if ( | ||
| config.localePrefix.mode === 'as-needed' && | ||
| config.localePrefix.mode !== 'never' && | ||
| config.localePrefix.prefixes | ||
| ) { |
There was a problem hiding this comment.
There's a chance for a minor simplification here now:
| } else if ( | |
| config.localePrefix.mode === 'as-needed' && | |
| config.localePrefix.mode !== 'never' && | |
| config.localePrefix.prefixes | |
| ) { | |
| } else if ('prefixes' in config.localePrefix) { |
Just to minify a tiny bit better :)
There was a problem hiding this comment.
Oh yes that sounds reasonable! But I suppose we still want to check if prefixes is truthy? With the in operator it'll evaluate to true even when someone passes undefined as the value.
So this for example would still run the branch of logic:
localePrefix: {
mode: 'always',
prefixes: undefined,
}So should we still check config.locale.prefixes or do you think just checking for the key is fine?
There was a problem hiding this comment.
Ah yes, I think you're right there. It could happen for example if someone conditionally assigns prefixes based on an environment parameter.
Checking config.locale.prefixes is something TypeScript isn't too happy about though, since we have type-safety for disallowing prefixes when mode: 'never' is used.
I'd say we leave it like you proposed it originally! 👍
There was a problem hiding this comment.
Yeah that's what I was thinking!
Oh yes that's true! I'll leave it as is then :)
amannn
changed the title
usePathname hydration error with custom prefixes, localePrefix: 'always' and static renderingusePathname inconsistency in Next.js leading to a hydration error with custom prefixes, localePrefix: 'always' and static rendering
|
Hey @hugotiger, many thanks again for your PR here! I wasn't quite sure where to reach out easiest, so I'll just post it here 😄 I’m planning to add a few company logos to the next-intl website to highlight adoption, and I was wondering if it would be okay to include Qasa's logo. Of course, I can remove it at any time if you’d prefer not to be listed. Totally fine either way—just let me know! It would mean a lot and really helps to show the impact next-intl is having in the developer community. Many thanks in any case! (I'm also available at [email protected] btw.) |
Fixes #2011
This PR introduces a workaround for vercel/next.js#73085.
In Next.js, using
usePathnamein combination with rewrites and middleware can trigger hydration errors. These only occur in production builds, and while they are documented, the information is somewhat hidden:This issue was partially addressed in #1571. However, I noticed that when
localePrefix.modeis set to'always', the workaround was not applied. Instead of adding an extra condition for'always', I flipped the check tolocalePrefix.mode !== 'never'. As far as I can tell this should work fine, but let me know if you see any risks/issues with this.