Skip to content

docs: improve react-intl documentation for React Server Components#3085

Merged
justin808 merged 4 commits intomainfrom
jg/3081-rsc-i18n-docs
Apr 12, 2026
Merged

docs: improve react-intl documentation for React Server Components#3085
justin808 merged 4 commits intomainfrom
jg/3081-rsc-i18n-docs

Conversation

@justin808
Copy link
Copy Markdown
Member

@justin808 justin808 commented Apr 9, 2026

Summary

  • Document createIntl from @formatjs/intl as the recommended approach for i18n in Server Components — a context-free API with full interpolation, pluralization, and date/number formatting
  • Add limitations section for the plain messages['key'] lookup pattern (only works for pre-formatted strings, renders ICU {variable} placeholders as literal text)
  • Document Rails pre-formatting (I18n.t('key', name: value)) as a valid alternative for Server Components
  • Add comparison table reconciling build-time (config.i18n_dir) vs controller-props i18n approaches
  • Fix vague i18next claim in rsc-third-party-libs.md with concrete per-request createInstance() guidance
  • Add RSC cross-reference section to the build-time i18n docs
  • Update compatibility decision matrix with createIntl recommendation

Fixes #3081

Test plan

  • Verify all internal markdown links resolve correctly
  • Review createIntl code examples for accuracy against FormatJS docs
  • Confirm build-time vs controller-props comparison table is accurate

🤖 Generated with Claude Code


Note

Low Risk
Low risk: documentation-only updates that don’t change runtime code, limited to guidance/examples for i18n usage in RSC.

Overview
Adds React Server Components i18n guidance across the docs, recommending react-intl’s context-free createIntl API for Server Components and documenting Rails-side pre-formatting as an alternative.

Clarifies the limitations of direct messages['key'] lookups with ICU placeholders, adds a build-time vs controller-props comparison table, and updates the RSC third-party compatibility docs/matrix to reflect the createIntl recommendation and more concrete i18next per-request setup notes.

Reviewed by Cursor Bugbot for commit eb62286. Bugbot is set up for automated code reviews on this repo. Configure here.

Summary by CodeRabbit

  • Documentation
    • Added a comprehensive guide for internationalization with React Server Components, recommending server-side formatting patterns and a controller pre-formatting alternative.
    • Reintroduced explicit client-side provider pattern for Client Components.
    • Added a build-time vs request-time comparison table and updated third-party library compatibility guidance (including per-request i18next considerations).
    • Expanded common mistakes with placeholder and formatting guidance.

- Document createIntl from @formatjs/intl as the recommended approach
  for i18n in Server Components (context-free, full formatting support)
- Add limitations section for plain messages['key'] lookup pattern
  (only works for pre-formatted strings, not ICU placeholders)
- Document Rails pre-formatting as a valid alternative approach
- Reconcile build-time (config.i18n_dir) vs controller-props approaches
  with comparison table explaining when to use each
- Fix vague i18next claim with concrete per-request initialization guidance
- Add RSC cross-reference section to the build-time i18n docs
- Update compatibility decision matrix with createIntl recommendation

Fixes #3081

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 9, 2026

Walkthrough

Documentation updates clarify React Server Component i18n patterns: add guidance for using createIntl in Server Components, explain limitations of messages['key'] (pre-formatted-only), present Rails controller pre-formatting, and align third-party compatibility notes for react-intl and react-i18next.

Changes

Cohort / File(s) Summary
RSC i18n docs
docs/oss/building-features/i18n.md
Added "Using i18n with React Server Components": explains build-time flat keys and Rails %{variable}→ICU conversion, notes useIntl/IntlProvider are unavailable in Server Components, and recommends createIntl or Rails pre-formatting; links to RSC i18n provider guide.
RSC context & state
docs/oss/migrating/rsc-context-and-state.md
Rewrote i18n guidance: call out messages['key'] limitation (plain pre-formatted strings only), add createIntl({ locale, messages }) Server Component pattern + cache, reintroduce client 'use client' IntlProvider pattern, add build-time vs controller-props comparison table, and update common mistakes (placeholder/ICU pitfalls).
Third‑party libs compatibility
docs/oss/migrating/rsc-third-party-libs.md
Clarified compatibility matrix: specify createIntl for react-intl in Server Components, mark react-i18next hooks as client-only ('use client'), and describe per-request i18next.createInstance() Server Component pattern (explicitly noted as non-used in codebase).

Sequence Diagram(s)

sequenceDiagram
  participant Rails as Rails Controller
  participant RSC as React Server Component
  participant FormatJS as createIntl (FormatJS)
  rect rgba(200,230,255,0.5)
    Rails->>RSC: Option A — pass pre-formatted strings (I18n.t(...))
    RSC-->>Rails: Render with plain props
  end
  rect rgba(220,255,200,0.5)
    RSC->>FormatJS: Option B — import createIntl({locale,messages})
    FormatJS-->>RSC: formatMessage / formatNumber / pluralize
    RSC-->>Client: Rendered HTML (no Intl context)
  end
  rect rgba(255,240,200,0.5)
    Client->>Client: Client Components use <IntlProvider> + useIntl()
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble keys where servers hum,
createIntl sings and Rails bakes some.
Messages tidy, placeholders right,
I hop, I stitch, I fluff the night. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: documentation improvements for react-intl in React Server Components, matching the three modified documentation files.
Linked Issues check ✅ Passed The PR successfully addresses all six key objectives from #3081: documents createIntl as the recommended RSC approach, adds limitations of messages['key'] pattern, reconciles build-time vs controller-props approaches with a comparison table, fixes the i18next claim with concrete guidance, documents Rails pre-formatting, and updates the compatibility matrix.
Out of Scope Changes check ✅ Passed All changes are scoped to documentation files addressing #3081 objectives: three files modified (i18n.md, rsc-context-and-state.md, rsc-third-party-libs.md) with no code changes or unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch jg/3081-rsc-i18n-docs

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps
Copy link
Copy Markdown

greptile-apps Bot commented Apr 9, 2026

Greptile Summary

This PR improves the i18n documentation for React Server Components by documenting createIntl from @formatjs/intl as the recommended context-free approach, adding a limitations section for plain messages['key'] lookups, introducing a build-time vs controller-props comparison table, and updating the third-party libs compatibility matrix with more concrete guidance.

  • Mistake numbering is broken in rsc-context-and-state.md: the new "Mistake 5" section is inserted between "Mistake 2" and "Mistake 3", making the list read 1 → 2 → 5 → 3 → 4.

Confidence Score: 4/5

Safe to merge after fixing the out-of-order mistake numbering (1 → 2 → 5 → 3 → 4) in rsc-context-and-state.md.

One P1 documentation correctness issue: the newly inserted 'Mistake 5' section is mis-numbered and sits between Mistake 2 and Mistake 3, which will confuse readers. The rest of the content — createIntl guidance, comparison table, and third-party-libs matrix updates — is accurate and well-structured.

docs/oss/migrating/rsc-context-and-state.md — fix the Mistake 5 heading to Mistake 3 and renumber subsequent mistakes accordingly.

Vulnerabilities

No security concerns identified. This is a documentation-only PR with no executable code changes.

Important Files Changed

Filename Overview
docs/oss/building-features/i18n.md Adds a short RSC cross-reference section pointing to createIntl and Rails pre-formatting; content is accurate and links resolve correctly.
docs/oss/migrating/rsc-context-and-state.md Expands i18n Provider section with createIntl guidance and comparison table; introduces a numbering error in the Common Mistakes list (5 appears between 2 and 3).
docs/oss/migrating/rsc-third-party-libs.md Updates i18n rows in both tables to reference createIntl and per-request i18next.createInstance(); changes are accurate and consistent with the other docs.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Server Component needs i18n] --> B{Has interpolation\nor pluralization?}
    B -- No --> C[Plain messages lookup\nmessages'key']
    B -- Yes --> D{Where to format?}
    D -- Server --> E[createIntl from @formatjs/intl\nfull formatting, no Context needed]
    D -- Rails --> F[Rails pre-formatting\nI18n.t with variables in controller]
    A --> G[Child Client Components]
    G --> H[IntlProvider + useIntl\nstandard react-intl Context]
    E --> I[Pass formatted strings\nto JSX directly]
    F --> I
Loading

Reviews (1): Last reviewed commit: "docs: improve react-intl documentation f..." | Re-trigger Greptile

Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Comment thread docs/oss/migrating/rsc-context-and-state.md
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 9, 2026

Review: docs: improve react-intl documentation for React Server Components

Good addition overall — the createIntl guidance fills a real gap, and the build-time vs controller-props comparison table is genuinely useful. The content is accurate and the limitations section for plain messages['key'] is exactly the kind of gotcha that trips people up.

Issues to fix

1. Mistake numbering out of order (inline comment on line 530)
The new entry was inserted as "Mistake 5" between Mistake 2 and Mistake 3, leaving the sequence 1 → 2 → 5 → 3 → 4. It should be renumbered to 3, with the existing Mistake 3 and 4 bumped to 4 and 5.

2. Import path inconsistency: @formatjs/intl vs react-intl (inline comments on lines 397 and 539)
The prose correctly notes that react-intl re-exports createIntl, but all code examples then import from @formatjs/intl directly. Readers already have react-intl installed — they should import from there (import { createIntl } from 'react-intl') rather than taking an explicit dependency on a transitive package.

3. Malformed BAD/GOOD code block in Mistake 5 (inline comment on lines 534–542)
The single code block mixes a BAD example and a GOOD example that both declare const greeting (redeclaration error in real code) and places an import statement after a const (invalid ES module syntax). These should be split into two separate fenced code blocks.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 345670f2fa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
docs/oss/migrating/rsc-third-party-libs.md (1)

254-258: Consider mentioning next-i18next v16's getT() as a more native RSC-friendly alternative.

The i18next.createInstance() pattern for per-request Server Component initialization is correctly documented and supported. However, the guidance omits a newer, more RSC-native approach: next-i18next v16 provides getT() specifically for Server Components, eliminating the need for manual hook avoidance and initialization management. Consider adding this as the recommended pattern while keeping createInstance() as a valid but more manual fallback.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/oss/migrating/rsc-third-party-libs.md` around lines 254 - 258, The doc
omits next-i18next v16's Server Component helper; update the
i18next/react-i18next row to mention next-i18next v16's getT() as the
recommended RSC-friendly approach, while keeping the existing
i18next.createInstance() per-request pattern as a manual fallback; reference the
symbols `getT()`, `i18next.createInstance()` and `useTranslation` in the Notes
or RSC Pattern column so readers can find both the native Server Component API
and the older hook/instance-based approach.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@docs/oss/migrating/rsc-third-party-libs.md`:
- Around line 254-258: The doc omits next-i18next v16's Server Component helper;
update the i18next/react-i18next row to mention next-i18next v16's getT() as the
recommended RSC-friendly approach, while keeping the existing
i18next.createInstance() per-request pattern as a manual fallback; reference the
symbols `getT()`, `i18next.createInstance()` and `useTranslation` in the Notes
or RSC Pattern column so readers can find both the native Server Component API
and the older hook/instance-based approach.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 412f53c4-59b3-42ff-91c3-5224d0d32f91

📥 Commits

Reviewing files that changed from the base of the PR and between 16ac897 and 345670f.

📒 Files selected for processing (3)
  • docs/oss/building-features/i18n.md
  • docs/oss/migrating/rsc-context-and-state.md
  • docs/oss/migrating/rsc-third-party-libs.md

@justin808
Copy link
Copy Markdown
Member Author

Review triage follow-up for skipped items:

All must-fix items were applied in commit 8c29975.

Comment thread docs/oss/building-features/i18n.md Outdated
Comment thread docs/oss/migrating/rsc-third-party-libs.md Outdated
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8c29975ed3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/oss/building-features/i18n.md Outdated
@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 9, 2026

Good documentation improvement overall. The createIntl recommendation fills a real gap for RSC i18n, the comparison table is useful, and renumbering the Common Mistakes section is clean housekeeping.

Package name inconsistency (two places): The text in i18n.md and rsc-third-party-libs.md refers to createIntl as coming from @formatjs/intl, but the code example in rsc-context-and-state.md correctly imports it from react-intl. Both exports exist, but react-intl v5+ re-exports createIntl - users who already have react-intl installed do not need a separate @formatjs/intl dependency. See inline comments on both files.

createIntlCache missing from recommended pattern: Without createIntlCache, expensive Intl.NumberFormat and Intl.DateTimeFormat instances are reconstructed on every request. FormatJS recommends passing a cache as the second argument to createIntl. The cache stores only Intl constructor results (no request data), so it is safe to share at module scope. Worth adding to the canonical example or at minimum as a performance note. See inline comment.

Minor - InteractiveFilters message ID assumption: The InteractiveFilters Client Component formats the id filters.apply, but the IntlProvider receives messages scoped to I18n.t(product_page). This works only if the product_page YAML contains a filters.apply sub-key - an assumption that is not stated. A one-line comment in the example would clarify.

- Change @formatjs/intl → react-intl in i18n.md and rsc-third-party-libs.md
  to match code examples (react-intl v5+ re-exports createIntl)
- Add createIntlCache to the recommended Server Component pattern to avoid
  recreating expensive Intl constructors on every request

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@justin808
Copy link
Copy Markdown
Member Author

Review follow-up — commit 1c5555c

Addressed all outstanding review comments from the second review round:

Fixed (3 items):

  1. i18n.md:192 — Changed @formatjs/intlreact-intl to match code examples
  2. rsc-third-party-libs.md:256 — Same @formatjs/intlreact-intl fix in the compatibility table
  3. rsc-context-and-state.md:418 — Added createIntlCache to the recommended Server Component pattern with a module-level cache and updated the note explaining why it's safe to share

Skipped (replied with rationale):

  • Duplicate @formatjs/intl comment from chatgpt-codex-connector — duplicate of TODO for first version #1
  • InteractiveFilters filters.apply message ID assumption — documentation nit, not blocking

All 10 review threads resolved (6 from first round + 4 from second round).

Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 12, 2026

Review

Good, accurate documentation overall. The createIntl guidance is technically correct and the restructuring of the i18n Provider section is a clear improvement — the old "Server Components can use the translations object directly" was misleading since it silently broke ICU placeholders.

Two issues to fix

1. Inconsistent createIntlCache usage (inline comment at line 545)

The "GOOD" example in Mistake 3 calls createIntl({ locale, messages }) with no cache, but the recommended pattern introduced earlier in the same file uses a module-level createIntlCache(). The snippet should be updated for consistency, and because it would otherwise be copied without the cache.

2. Module-level cache explanation could be more precise (inline comment at line 421)

The note says the cache is "safe to share at module scope" — which is true — but doesn't spell out that module-level variables in Node.js are shared across all concurrent requests for the life of the process. The safety relies on the cache holding only Intl constructor instances keyed by format options, with no user/request data. Worth being explicit about this for readers coming from Rails who may not have this mental model.

Minor observations (no action needed)

  • The bidirectional cross-references between i18n.md and rsc-context-and-state.md are good.
  • The comparison table (build-time vs controller-props) is accurate and the distinction is useful.
  • The i18next per-request createInstance() guidance is a concrete improvement over the previous vague statement.
  • I18nProvider being defined after its first import in the createIntl example is a little jarring to read top-to-bottom, but since the definition appears in the next subsection it's acceptable.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1c5555c80a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/oss/building-features/i18n.md
Comment thread docs/oss/migrating/rsc-context-and-state.md Outdated
- Add createIntlCache to GOOD snippet in Mistake 3 to match recommended pattern
- Clarify module-level cache note: explicit about Node.js process-lifetime sharing
  and that cache holds only Intl constructor instances (no request data)
- Change "flat or nested" to "Flat (required by createIntl)" in comparison table

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@justin808
Copy link
Copy Markdown
Member Author

Review follow-up — commit eb62286

Addressed all outstanding review comments from the third review round:

Fixed (3 items):

  1. rsc-context-and-state.md:545 — Added createIntlCache to the GOOD snippet in Mistake 3 to match the recommended pattern
  2. rsc-context-and-state.md:421 — Clarified module-level cache note: explicit about Node.js process-lifetime sharing across all concurrent requests, and that the cache holds only Intl constructor instances (no user/request data)
  3. rsc-context-and-state.md:476 — Changed "Your choice (flat or nested)" to "Flat (required by createIntl)" in comparison table

Skipped (replied with rationale):

  • react-intl ^2.1.5 / addLocaleData in pre-existing setup section — out of scope for this RSC docs PR, will track separately

All 14 review threads now resolved across 3 review rounds.

Comment on lines +542 to +548
```jsx
// GOOD: Use createIntl to format with variable substitution
import { createIntl, createIntlCache } from 'react-intl';
const cache = createIntlCache();
const intl = createIntl({ locale, messages }, cache);
const greeting = intl.formatMessage({ id: 'greeting' }, { name: 'John' });
```
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The "GOOD" example places createIntl(...) and greeting at module scope, but locale and messages are not defined there — this would throw ReferenceError: locale is not defined if copied literally.

Compare with the recommended createIntl example above: cache is at module scope, while intl is created inside the component function where locale and messages are in scope.

Suggested change
```jsx
// GOOD: Use createIntl to format with variable substitution
import { createIntl, createIntlCache } from 'react-intl';
const cache = createIntlCache();
const intl = createIntl({ locale, messages }, cache);
const greeting = intl.formatMessage({ id: 'greeting' }, { name: 'John' });
```
```jsx
// GOOD: Use createIntl to format with variable substitution
import { createIntl, createIntlCache } from 'react-intl';
// Module-level — safe, caches only Intl constructors
const cache = createIntlCache();
export default function MyComponent({ locale, messages }) {
const intl = createIntl({ locale, messages }, cache);
const greeting = intl.formatMessage({ id: 'greeting' }, { name: 'John' });
return <p>{greeting}</p>;
}

| Approach | Source | Key format | Best for |
| ------------------------------ | -------------------------- | ------------------------------- | --------------------------------------------------------------------------------------- |
| Build-time (`config.i18n_dir`) | YAML → compiled JSON/JS | Flat: `"product.title"` | Static translations shared across pages; client-side `react-intl` with `defineMessages` |
| Controller-props (`I18n.t`) | Rails I18n at request time | Flat (required by `createIntl`) | Page-specific translations; pre-formatted strings with variables; RSC `createIntl` |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

"Flat (required by createIntl)" in the "Key format" column is slightly misleading. createIntl accepts any flat Record<string, string> — both approaches (build-time and controller-props) produce flat key→string objects for react-intl. The real distinction is who owns the key namespace, not that createIntl imposes the flat requirement. Consider rewording to something like "Flat map (ID → string)" to avoid implying that only this approach satisfies createIntl's contract.

Suggested change
| Controller-props (`I18n.t`) | Rails I18n at request time | Flat (required by `createIntl`) | Page-specific translations; pre-formatted strings with variables; RSC `createIntl` |
| Controller-props (`I18n.t`) | Rails I18n at request time | Flat map (ID → string) | Page-specific translations; pre-formatted strings with variables; RSC `createIntl` |

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 12, 2026

Overall this is a well-structured documentation improvement. The createIntl guidance is technically accurate, the build-time vs. controller-props comparison table is helpful, and the re-numbering of Common Mistakes keeps the section coherent. One bug in a code example: the Mistake 3 GOOD example puts createIntl and formatMessage at module scope where locale and messages are undefined; copied literally it would throw ReferenceError. Inline suggestion posted. Minor wording suggestion: the table column says Flat (required by createIntl) for controller-props key format, but both approaches produce a flat ID-to-string map that createIntl accepts; inline suggestion posted. Nits: PR description references @formatjs/intl while code examples import from react-intl (both are correct since react-intl re-exports createIntl from @formatjs/intl). The cache safety note is accurate; optionally noting the cache is keyed by locale + format descriptor would pre-empt multi-locale questions.

@justin808 justin808 merged commit 6a18c16 into main Apr 12, 2026
20 of 21 checks passed
@justin808 justin808 deleted the jg/3081-rsc-i18n-docs branch April 12, 2026 08:58
justin808 added a commit that referenced this pull request Apr 12, 2026
…3085)

## Summary

- Document `createIntl` from `@formatjs/intl` as the recommended
approach for i18n in Server Components — a context-free API with full
interpolation, pluralization, and date/number formatting
- Add limitations section for the plain `messages['key']` lookup pattern
(only works for pre-formatted strings, renders ICU `{variable}`
placeholders as literal text)
- Document Rails pre-formatting (`I18n.t('key', name: value)`) as a
valid alternative for Server Components
- Add comparison table reconciling build-time (`config.i18n_dir`) vs
controller-props i18n approaches
- Fix vague i18next claim in `rsc-third-party-libs.md` with concrete
per-request `createInstance()` guidance
- Add RSC cross-reference section to the build-time i18n docs
- Update compatibility decision matrix with `createIntl` recommendation

Fixes #3081

## Test plan

- [ ] Verify all internal markdown links resolve correctly
- [ ] Review `createIntl` code examples for accuracy against FormatJS
docs
- [ ] Confirm build-time vs controller-props comparison table is
accurate

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: documentation-only updates that don’t change runtime code,
limited to guidance/examples for i18n usage in RSC.
> 
> **Overview**
> Adds **React Server Components i18n guidance** across the docs,
recommending `react-intl`’s context-free `createIntl` API for Server
Components and documenting Rails-side pre-formatting as an alternative.
> 
> Clarifies the limitations of direct `messages['key']` lookups with ICU
placeholders, adds a build-time vs controller-props comparison table,
and updates the RSC third-party compatibility docs/matrix to reflect the
`createIntl` recommendation and more concrete `i18next` per-request
setup notes.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
eb62286. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Added a comprehensive guide for internationalization with React Server
Components, recommending server-side formatting patterns and a
controller pre-formatting alternative.
* Reintroduced explicit client-side provider pattern for Client
Components.
* Added a build-time vs request-time comparison table and updated
third-party library compatibility guidance (including per-request
i18next considerations).
  * Expanded common mistakes with placeholder and formatting guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>
justin808 added a commit that referenced this pull request Apr 12, 2026
…3085)

## Summary

- Document `createIntl` from `@formatjs/intl` as the recommended
approach for i18n in Server Components — a context-free API with full
interpolation, pluralization, and date/number formatting
- Add limitations section for the plain `messages['key']` lookup pattern
(only works for pre-formatted strings, renders ICU `{variable}`
placeholders as literal text)
- Document Rails pre-formatting (`I18n.t('key', name: value)`) as a
valid alternative for Server Components
- Add comparison table reconciling build-time (`config.i18n_dir`) vs
controller-props i18n approaches
- Fix vague i18next claim in `rsc-third-party-libs.md` with concrete
per-request `createInstance()` guidance
- Add RSC cross-reference section to the build-time i18n docs
- Update compatibility decision matrix with `createIntl` recommendation

Fixes #3081

## Test plan

- [ ] Verify all internal markdown links resolve correctly
- [ ] Review `createIntl` code examples for accuracy against FormatJS
docs
- [ ] Confirm build-time vs controller-props comparison table is
accurate

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: documentation-only updates that don’t change runtime code,
limited to guidance/examples for i18n usage in RSC.
> 
> **Overview**
> Adds **React Server Components i18n guidance** across the docs,
recommending `react-intl`’s context-free `createIntl` API for Server
Components and documenting Rails-side pre-formatting as an alternative.
> 
> Clarifies the limitations of direct `messages['key']` lookups with ICU
placeholders, adds a build-time vs controller-props comparison table,
and updates the RSC third-party compatibility docs/matrix to reflect the
`createIntl` recommendation and more concrete `i18next` per-request
setup notes.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
eb62286. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Added a comprehensive guide for internationalization with React Server
Components, recommending server-side formatting patterns and a
controller pre-formatting alternative.
* Reintroduced explicit client-side provider pattern for Client
Components.
* Added a build-time vs request-time comparison table and updated
third-party library compatibility guidance (including per-request
i18next considerations).
  * Expanded common mistakes with placeholder and formatting guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>
justin808 added a commit that referenced this pull request Apr 12, 2026
…3085)

## Summary

- Document `createIntl` from `@formatjs/intl` as the recommended
approach for i18n in Server Components — a context-free API with full
interpolation, pluralization, and date/number formatting
- Add limitations section for the plain `messages['key']` lookup pattern
(only works for pre-formatted strings, renders ICU `{variable}`
placeholders as literal text)
- Document Rails pre-formatting (`I18n.t('key', name: value)`) as a
valid alternative for Server Components
- Add comparison table reconciling build-time (`config.i18n_dir`) vs
controller-props i18n approaches
- Fix vague i18next claim in `rsc-third-party-libs.md` with concrete
per-request `createInstance()` guidance
- Add RSC cross-reference section to the build-time i18n docs
- Update compatibility decision matrix with `createIntl` recommendation

Fixes #3081

## Test plan

- [ ] Verify all internal markdown links resolve correctly
- [ ] Review `createIntl` code examples for accuracy against FormatJS
docs
- [ ] Confirm build-time vs controller-props comparison table is
accurate

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: documentation-only updates that don’t change runtime code,
limited to guidance/examples for i18n usage in RSC.
> 
> **Overview**
> Adds **React Server Components i18n guidance** across the docs,
recommending `react-intl`’s context-free `createIntl` API for Server
Components and documenting Rails-side pre-formatting as an alternative.
> 
> Clarifies the limitations of direct `messages['key']` lookups with ICU
placeholders, adds a build-time vs controller-props comparison table,
and updates the RSC third-party compatibility docs/matrix to reflect the
`createIntl` recommendation and more concrete `i18next` per-request
setup notes.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
eb62286. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Added a comprehensive guide for internationalization with React Server
Components, recommending server-side formatting patterns and a
controller pre-formatting alternative.
* Reintroduced explicit client-side provider pattern for Client
Components.
* Added a build-time vs request-time comparison table and updated
third-party library compatibility guidance (including per-request
i18next considerations).
  * Expanded common mistakes with placeholder and formatting guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.6 (1M context) <[email protected]>
justin808 added a commit that referenced this pull request Apr 12, 2026
…ages

* origin/main: (44 commits)
  Consolidate CSP nonce sanitization into shared module (#2828)
  Add comprehensive --rsc-pro generator tests (#3098)
  fix: cross-env validation and docs for renderer password (#3090)
  Improve package metadata and Pro upgrade CTAs (#3112)
  docs: standardize warning syntax to GFM alert format (#3115)
  docs: improve react-intl documentation for React Server Components (#3085)
  Fix generator CI SSR regression on main (#3110)
  Refocus GitHub README on docs navigation (#3113)
  Add manual dev environment testing checklist for coding agents (#3074)
  Bump version to 16.6.0
  Update CHANGELOG.md for 16.6.0 (#3078)
  fix: node-renderer diagnostic improvements (#3086)
  fix: pin third-party npm deps in generator to prevent peer dep conflicts (#3083)
  chore(deps): bump lodash from 4.17.23 to 4.18.1 in the npm-security group across 1 directory (#2920)
  fix: refactor formatExceptionMessage to accept generic request context (#2877)
  Bump version to 16.6.0.rc.1
  Update CHANGELOG.md for 16.6.0.rc.1 (#3079)
  Update CHANGELOG.md unreleased section (#3077)
  Fix Content-Length mismatch and null renderingRequest errors in node renderer (#3069)
  Improve memory debugging docs with simpler heap snapshot approach (#3072)
  ...

# Conflicts:
#	docs/pro/home-pro.md
#	docs/pro/react-on-rails-pro.md
#	docs/sidebars.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Review and improve react-intl documentation for React Server Components

1 participant