Appearance
React implementation
The brochure site is React 19 on Next.js Pages Router with TypeScript. Public static pages plus a small contact API route — no custom GraphQL backend or auth shell.
App entry
| Concern | Typical file |
|---|---|
| Global providers + layout | pages/_app.tsx |
| HTML shell + Griffel SSR | pages/_document.tsx |
| Routes | pages/*.tsx with getStaticProps + ISR where CMS-backed |
Provider chain
Outer → inner (pattern used in this monorepo):
text
I18nextProvider
└─ Site config provider
└─ Group / display-name provider
└─ FluentProvider (custom theme)
└─ Page layout (header / main / footer)
└─ Error boundary
└─ Page componentSite settings can load once in app-level getInitialProps so every page shares HQ/charity/branding data without re-fetching in each route.
Page data pattern
Brochure pages use getStaticProps and ISR. Content precedence is often: CMS document → locale JSON fallback → code defaults.
Components
- UI under
components/ - Shared tokens under
config/ - Domain helpers under
lib/ - Colocated unit tests:
*.test.ts
Prefer composition over boolean prop sprawl; Fluent for controls; i18n for user-facing strings.
React error boundary
Client render failures in page content show a soft recovery UI instead of a blank tree.
| Concern | Approach |
|---|---|
| Library | react-error-boundary |
| Fallback | Message bar + “Try again” + home link |
| Reset | resetKeys including the current route path so navigation clears a failed page |
| Logging | Central logger with a greppable prefix (swap for an error service later) |
What it catches
- Yes: errors thrown during render of descendants.
- No: event-handler errors, SSR failures above the boundary, async errors after render, errors in the boundary/providers above it.
Conceptual wiring
tsx
<PageLayout>
<AppErrorBoundary resetKeys={[router.asPath]}>
<Component {...pageProps} />
</AppErrorBoundary>
</PageLayout>Nested boundaries
Rare site-wide. Wrap large optional widgets (embeds, experimental blocks) so the rest of the page stays usable. Reuse the same fallback tone (clear message + recovery CTA).