Overview

DevX & Delivery

Writing code is only part of the job. Shipping it safely, monitoring it in production, and maintaining the systems that let a team work effectively at scale are equally important. This section covers the delivery infrastructure around your application code.

The section follows the lifecycle of a change: automated shipping, controlled rollout, observing what breaks, then the shared systems (design system, i18n) that underpin everything.

---

What's Covered

CI/CD Pipelines for Frontend — Five-stage pipeline: quality gates (lint + tsc --noEmit), matrix unit tests across Node 18/20/22, build with npm ci for reproducibility, bundle size gating via size-limit (exits non-zero if chunks exceed limits), Lighthouse CI against .next/ build output. Deployment: preview deploys on PRs via Vercel action with PR comment posting the URL; production deploys gated on github.ref == refs/heads/main and GitHub Environments for manual approval. Post-deploy smoke tests via Playwright against the live production URL. Dependency caching with actions/setup-node@v4 cache: "npm" cuts install time by 80% on warm cache. Turbo remote caching for monorepos: --filter="...[origin/main]" runs only affected packages; remote cache shares output across all runners and developers. Never prefix server-only secrets with NEXT_PUBLIC_ — that embeds them in the client bundle.

Feature Flags & Progressive Rollouts — Flag taxonomy: kill switch (emergency disable), release flag (rollout gate), experiment flag (A/B test), ops flag (toggle expensive behaviour), permission flag (beta/paid-tier access). Consistent bucketing: hash(userId + flagName) % 100 < rolloutPercentage — including flagName prevents correlation bias across flags. Evaluation location: Server Components for component-tree branching (no flicker), middleware for full-page redirects and edge A/B test assignment. Never evaluate flags in Client Components — pass pre-resolved booleans as props. Anonymous user handling: assign crypto.randomUUID() in middleware, persist as httpOnly cookie, use for stable bucketing before authentication. Dark launch: flag at 0% — code ships to production with zero user exposure. Flag lifecycle governance: registry with createdAt + type, CI lint rule enforcing removal within N days of creation.

Error Tracking & Observability — Sentry lifecycle: unhandled exception → SDK serializes with breadcrumbs → ships to ingest → source map symbolication → issue grouping. Source map workflow: withSentryConfig uploads .map files during next build, deleteSourcemapsAfterUpload: true removes them from the public build output (leaving them in the CDN exposes your full source). error.digest: Next.js hashes server errors into a short digest — safe to send to clients and Sentry; correlates error.tsx boundary events with server stdout log lines. beforeSend: filter events before transmission — suppress browser extension stack frames, known benign errors, bot traffic; return null to discard. Custom fingerprinting: override Sentry's default hash-by-stack-trace grouping for high-cardinality errors (payment-provider-timeout across thousands of different cart IDs → one issue, not thousands). Structured logging: JSON to process.stdout in production, parsed by log drains (Datadog, Axiom, CloudWatch). Alert on affected users or error rate (errors/session) — not raw event volume.

Design System Ownership & Versioning — Three ownership models: centralized (one team, potential bottleneck), federated (product teams contribute, core stewards review), steward model (anyone contributes, domain stewards approve). Semver discipline: MAJOR for breaking changes (renamed prop, removed component, changed token value), MINOR for additions, PATCH for fixes — no exceptions. Changesets workflow: contributor runs npx changeset in PR → creates .changeset/*.md with bump type and summary → CI runs npx changeset version on merge (bumps package.json, writes CHANGELOG.md) → npx changeset publish to npm. package.json exports map: lists only public API entry points — unlisted internal paths throw import errors in Node.js and bundlers. peerDependencies for React: bundling React creates duplicate module instances → broken hooks and Context. Deprecation lifecycle: warn in dev for one major → remove in next major. Codemods (jscodeshift) for mechanical prop renames. Chromatic visual regression testing: screenshots every Storybook story, diffs against baseline, blocks merge pending design review.

i18n Architecture — Three pillars: [locale] dynamic segment (locale available as params to all Server Components), middleware detection (cookie → Accept-Language → default locale), server-side message loading (catalog never sent to client). Locale validation: notFound() on invalid [locale] params prevents runtime errors. Layout: <html lang={locale} dir={rtlLocales.has(locale) ? "rtl" : "ltr"}>. Module-level messageCache Map: loaded once per server process lifetime. Missing key fallback chain: requested locale → fallback locale messages → key string itself. ICU plural rules: English if (count === 1) fails for Russian (3 forms), Arabic (6 forms), Polish (4 forms) — use next-intl for full CLDR plural support. Intl.NumberFormat(locale, { style: "currency" }) for prices — "fr" + "EUR" → "12,99 €", "en" + "USD" → "$12.99". CSS logical properties (margin-inline-start, padding-inline-end, text-align: start) for RTL support — physical properties do not flip with dir="rtl". Namespace splitting: per-feature JSON files loaded only by pages that use them; cache key is locale:namespace.