Hydration error (Minified React #418) on /dashboard/overview and /dashboard/my-content

[delonsp]

Summary

In production builds, /dashboard/overview and /dashboard/my-content throw a Minified React error #418 (text content does not match server-rendered HTML) on first load. Page recovers visually after client re-render, but console is polluted and there's a brief flicker.

Reproduce

1. Build CourseLit for production: pnpm build.
2. Run: pnpm start.
3. Log in and visit /dashboard/overview.
4. Open DevTools → Console.

Expected

Clean SSR → hydration with no React warnings/errors.

Actual

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]=
for the full message or use the non-minified dev environment for full errors and
additional helpful warnings.

Same error on /dashboard/my-content.

Suspected cause

Text content mismatch between SSR and client — typical sources:

• Date/time formatting using user-locale or Intl.DateTimeFormat with timezone differing between Node server and browser.
• Counters or relative timestamps (e.g. "X days ago") computed at render time.
• Numbers formatted with Intl.NumberFormat and locale.

How to debug

Run a non-minified build (NODE_ENV=development pnpm build && pnpm start) to get the full error message identifying which component and which text differs.

Environment

• CourseLit fork based on upstream main
• Next.js 15, React 18.3.1
• Deployment: Docker Compose + Traefik HTTPS, browser locale pt-BR, server timezone UTC