Leveraging React Context Across Render Boundaries in Next.js - Lessons from Building a Locale Switcher

[timgruenewald]

In Next.js applications, layouts often need access to data that only becomes available after a nested page has rendered - for example, localized slugs from a headless CMS that are required to build SEO-friendly, localized URLs. This article explores how to bridge that gap with React Context, why global stores and "server contexts" are usually not a good idea, and how a context-based pattern can help manage your state safely across render client/server boundaries.

[kunman93]

Good article overall — the problem is clearly motivated and the solution pattern is well explained. I've left 22 inline comments covering the following categories:

Must fix:

• Wrong shortDescription in frontmatter (copy-pasted from a different article)
• Broken hyperlink (missing https:// scheme on the Google Search Central URL)
• Two undefined-variable / compile errors in code examples
• TypeScript syntax error in SlugMap type (>>)
• Missing usePathname and Link imports in the LocaleSwitcher snippet
• Unstable useEffect dependency references (getSlugs, setSlugs)

Language (British English):

• American → British spelling throughout (localized → localised, behavior → behaviour, summarize → summarise)
• Consequentially → Consequently
• resp. → or (German abbreviation, not English)
• beforementioned → aforementioned
• at a first glance → at first glance

Typos / duplicate words:

• "only be only" — duplicate "only"
• "even that that" — duplicate "that"
• "withing" → "within"
• "into the layout and into the layout" — repeated phrase
• "in the sense of that" → "in the sense that"

Structure:

• Section heading missing ? (# What about React Server Context)
• Space before colon in heading (# The Solution : …)
• react.cache() → React.cache()
• Flat heading hierarchy across the failed-approaches sections
• LOCALES constant inconsistent with running prose examples

[kunman93]

Wrong shortDescription — this appears to be copied from a completely unrelated article (react-router-6-page-transitions):

Implement smooth fade page transitions in React apps using react-router v6 and framer motion. Learn to handle component lifecycle for seamless animations.

Please replace with a short description that accurately summarises this article — e.g. something like:

Learn how to bridge server-rendered CMS data into a client-side locale switcher in Next.js using a React Context hydrator pattern, without global stores or unstable server context APIs.

[kunman93]

"a admin UI" → "an admin UI" (the article "a" must become "an" before a vowel sound).

[kunman93]

"Consequentially" → "Consequently". "Consequentially" means "of great consequence / significance"; the intended meaning here is "as a result / therefore", which is "consequently".

[kunman93]

"locale resp. language switcher" — resp. is a German abbreviation (respektive), not standard English. Replace with "or": "locale or language switcher component".

[kunman93]

The link target is missing the https:// scheme: developers.google.com/search/... — this will not resolve as a clickable hyperlink. Change to:

[Google documents on "Google Search Central"](https://developers.google.com/search/docs/crawling-indexing/url-structure#use-your-audiences-language)

[kunman93]

params is missing its TypeScript type annotation. Every other page component in this article is correctly typed — this example should be consistent:

export default async function ProductPage({ params }: { params: Promise<{ locale: string; slug: string }> }) {

[kunman93]

usePathname and Link are used in this snippet but neither is imported. For readers new to Next.js these are particularly non-obvious. Please add:

import { usePathname } from "next/navigation";
import Link from "next/link";

[kunman93]

The LOCALES array hardcodes ["de", "fr", "it"] (three locales including Italian), but the article's running example throughout only ever mentions German and French. Either align the array with the prose example (["de", "fr"]) or introduce Italian somewhere in the narrative earlier.

[kunman93]

British English spelling — "localize" family — the article consistently uses American English spelling throughout. As the blog uses British English, all of these need updating:

American (current)	British (required)
localized	localised
localizing	localising
localization	localisation
localize	localise

This affects around 10 occurrences across prose, the frontmatter description, and headings. (Occurrences inside code blocks/backtick literals should remain as-is, since that reflects the actual variable/function names.)

[kunman93]

Heading hierarchy — the sections "What about React Server Context?", "React's cache()", and "Moving away from the idea of 'server context'" are all logically sub-topics of the failed-approaches narrative started by "First Attempt: Global (Server-Side) Stores", yet all four share the same top-level # heading. This flattens the article structure and makes it harder for readers to follow the flow.

Consider demoting those three sections to ## and nesting them under a broader top-level section such as # Why Common Approaches Fall Short, so the structure reads:

# The Challenge
# Why Common Approaches Fall Short
  ## First Attempt: Global (Server-Side) Stores
  ## What about React Server Context?
  ## React's cache()
  ## Moving away from the idea of "server context"
# The Solution: A Context Hydrator Pattern
# Key Lessons
# Conclusion

[kunman93]

I let Copilot do the reviewing. :)

[timgruenewald]

Implemented all review feedback for the article and re-checked the file end-to-end.

Addressed items:

1. Fixed frontmatter short description.
2. Fixed the Google Search Central URL scheme.
3. Corrected snippet errors (undefined variable, SlugMap type syntax, missing imports).
4. Stabilized the hydrator effect dependencies in the example.
5. Fixed all reported typos/duplicate words and phrasing issues.
6. Corrected heading punctuation/style and React.cache naming.
7. Improved heading hierarchy for the failed-approaches section.
8. Aligned the LOCALES snippet with the prose examples.

Note:

1. The article prose is now intentionally in American English.

Ready for another pass if you want any additional editorial tightening.

[timgruenewald]

Updated to inline Mermaid in index.md.

Replaced the external Mermaid image/link with an in-file Mermaid block to make the diagram easier to edit, review, and maintain.