[sitecore-jss-nextjs] Fix Link component locale handling for languageEmbedding="asNeeded" #2172
+102
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR: [sitecore-jss-nextjs] Fix Link component locale handling for different languageEmbedding configurations
Description / Motivation
The
Linkcomponent currently hardcodeslocale={false}when rendering Next.js's<Link>component. This prevents Next.js from automatically adding locale prefixes to URLs.While this works correctly when Sitecore is configured with
languageEmbedding="always"(where URLs from Sitecore already include the locale prefix), it breaks navigation for sites usinglanguageEmbedding="asNeeded"where Sitecore URLs may not include the locale prefix.The Issue
When a user is on a non-default locale page (e.g.,
/sv/about) and clicks an internal link that Sitecore returns without a locale prefix (e.g.,/contact), they are incorrectly navigated to the default locale version (/contact) instead of staying in their current locale (/sv/contact).Historical Context
PR #493 (Nov 2020) introduced the
locale={false}pattern as a workaround to prevent double locale prefixes when Sitecore URLs already contain the locale. The PR description noted:It seems this approach was designed with
languageEmbedding="always"configurations in mind, and the behavior forlanguageEmbedding="asNeeded"appears to be an edge case that wasn't fully addressed at the time.Solution
Instead of hardcoding
locale={false}, we can intelligently detect whether the href already contains a locale prefix by checking against the configured locales from Next.js's router:Behavior:
/sv/about) →locale={false}(don't double-add)/about) →locale={undefined}(let Next.js handle it based on current locale)Benefits
languageEmbedding="always"- no double locale prefixeslanguageEmbedding="asNeeded"- locale is preservedTesting Details
languageEmbedding="always"configuration - no double prefixeslanguageEmbedding="asNeeded"configuration - locale preserved correctlyTest Cases
/sv/about) + current localesv→ navigates to/sv/about✅/about) + current localesv→ navigates to/sv/about✅/en/about) + current localesv→ navigates to/en/about✅Types of changes
Checklist