← UniformCONTENT HISTORYWHAT CHANGED · RULE-BASED ANALYSIS
Update to Uniform
Snapshot Sep 30, 2026 · 23:15 UTC · version 1.0.0
Collection source: not recorded for this historical snapshot.
First saved snapshot
No earlier snapshot is available to establish a change.
Compare saved observations
Download comparison JSONFull technical diff · 0 changed fields
Full snapshot data
{
"description": "Guides integration of Uniform CMS with Next.js App Router using the @uniformdev/next-app-router v2 SDK and React Server Components. Covers project setup, environment variables, required edge middleware and advanced routing, the uniform/[code] composition route, component mapping with resolveComponent, rendering slots and parameters, asset handling, client-side personalization with quirks and scores, contextual editing preview, Next.js 16 cacheComponents, composition data enhancement, and adapter compatibility mode. Use when adding Uniform to a Next.js 16 App Router project, creating Uniform-powered React server components, or configuring live preview, personalization, and caching.",
"included_files": [
{
"relative_path": "agents/openai.yaml",
"size_in_bytes": 189
},
{
"relative_path": "references/advanced.md",
"size_in_bytes": 8096
},
{
"relative_path": "references/components.md",
"size_in_bytes": 12090
},
{
"relative_path": "references/personalization.md",
"size_in_bytes": 4933
},
{
"relative_path": "references/preview.md",
"size_in_bytes": 3008
},
{
"relative_path": "references/routing.md",
"size_in_bytes": 6507
},
{
"relative_path": "references/setup.md",
"size_in_bytes": 13450
}
],
"name": "uniform-nextjs-app-router",
"skill_md_contents": "---\nname: uniform-nextjs-app-router\ndescription: Guides integration of Uniform CMS with Next.js App Router using the @uniformdev/next-app-router v2 SDK and React Server Components. Covers project setup, environment variables, required edge middleware and advanced routing, the uniform/[code] composition route, component mapping with resolveComponent, rendering slots and parameters, asset handling, client-side personalization with quirks and scores, contextual editing preview, Next.js 16 cacheComponents, composition data enhancement, and adapter compatibility mode. Use when adding Uniform to a Next.js 16 App Router project, creating Uniform-powered React server components, or configuring live preview, personalization, and caching.\nlicense: MIT\n---\n\n# Uniform with Next.js App Router\n\nIntegration guide for wiring Uniform CMS to a Next.js application using the App Router. The integration uses React Server Components and the `@uniformdev/next-app-router` package (the **v2** SDK, version `20.58.0` or later).\n\n## Requirements\n\n- **Next.js 16+** and **App Router only** (this v2 SDK does not support the Page Router).\n- **Node.js 22+**.\n- A Uniform project with compositions.\n- On Next.js 15 + Page Router, use the Page Router SDK instead. Migrating Page Router → App Router? Contact Uniform support.\n\n## Quick start\n\nScaffold a working project instead of integrating from scratch:\n\n```bash\nnpx @uniformdev/cli@latest new\n```\n\nSelect **Next.js**, then the **Component Starter Kit** (full-featured) or **Hello World** (minimal). Otherwise follow the manual setup in [references/setup.md](references/setup.md).\n\n## Required packages\n\n`@uniformdev/next-app-router` (version `20.58.0`+), `@uniformdev/canvas` and `@uniformdev/cli`. For advanced client-side context customization, also add `@uniformdev/next-app-router-client` and `@uniformdev/context`.\n\n## Architecture essentials\n\n- **Middleware is required.** It resolves the route via the Uniform Route API, evaluates personalization/A/B tests at the edge, and rewrites the request to `/uniform/[code]` (where `code` is serialized page state). For Next.js 16, the file MUST be named `middleware.ts` and the config export MUST include `runtime: \"experimental-edge\"`. Next.js 16.2+ prints a build warning recommending renaming to `proxy.ts` — ignore it and keep `middleware.ts`: `proxy.ts` does not support the edge runtime Uniform requires (renaming fails the build with \"Proxy does not support Edge runtime\"). The deprecation warning is harmless.\n- **The composition route is `app/uniform/[code]/page.tsx`**, not a catch-all. `UniformComposition` fetches and renders the tree, sets up `UniformContext` internally (in `Suspense`), and calls `notFound()` if the route can't resolve.\n- **Do NOT place `UniformContext` in `layout.tsx`.** It's handled by `UniformComposition`.\n- **Parameters are accessed via the `parameters` object** (`parameters: { title }`), each wrapped in `ComponentParameter<T>` and marked optional.\n- **The manifest is fetched at runtime** — no local download needed. Publish it (`uniform context manifest publish`) when you sync manifest definitions; the npm script is optional.\n- **Enable `cacheComponents`** (Next.js 16) and import `resolveRouteFromCode` from `@uniformdev/next-app-router/cache` for static-like performance and automatic cache invalidation.\n\n## Key differences from Page Router\n\n| Aspect | App Router (`@uniformdev/next-app-router`) | Page Router |\n|--------|-------------------------------------------|-------------|\n| Component mapping | `resolveComponent` function | `registerUniformComponent()` registry |\n| Routing | `middleware.ts` → `uniform/[code]` route | `withUniformGetServerSideProps` |\n| Data fetching | `resolveRouteFromCode` / `createUniformStaticParams` | `getServerSideProps` wrapper |\n| Parameter access | `parameters` object, wrapped in `ComponentParameter<T>` | direct prop / registry value |\n| Text rendering | `<UniformText component={component} parameter={title} />` | `<UniformText parameterId=\"...\" />` |\n| Context manifest | fetched at runtime; publish optional/CLI | manifest download into build |\n\n## Import paths\n\n| Category | Exports | Import path |\n|----------|---------|-------------|\n| Core | `UniformComposition`, `UniformContext`, `UniformPlayground`, `resolveRouteFromCode`, `resolvePlaygroundRoute`, `precomputeComposition`, `createUniformStaticParams`, `createCompositionCache`, `ResolveComponentFunction`, `ResolveComponentResult` | `@uniformdev/next-app-router` |\n| Routing / Data | `findRouteMatch`, `CustomRoute`, `DefaultDataClient`, `EnhanceRouteOptions` | `@uniformdev/next-app-router` |\n| Cache | `resolveRouteFromCode` (wrapped in `'use cache'`) | `@uniformdev/next-app-router/cache` |\n| Compat | `createAdapterResolveComponentFunction`, `ResolveComponentResultWithType`, `UniformText`, `UniformSlot` | `@uniformdev/next-app-router/compat` |\n| Clients | `getCanvasClient`, `getRouteClient`, `getManifest`, `getManifestClient`, `getProjectMapClient` | `@uniformdev/next-app-router` |\n| Components | `UniformSlot`, `UniformText`, `UniformRichText`, `getUniformSlot` | `@uniformdev/next-app-router/component` |\n| Types | `ComponentProps`, `ComponentParameter`, `ComponentContext` | `@uniformdev/next-app-router/component` |\n| Hooks | `useUniformContext`, `useQuirks`, `useScores` | `@uniformdev/next-app-router/component` |\n| Middleware | `uniformMiddleware`, `handleUniformRoute` | `@uniformdev/next-app-router/middleware` |\n| Config | `withUniformConfig`, `UniformServerConfig` | `@uniformdev/next-app-router/config` |\n| Handlers | `createPreviewGETRouteHandler`, `createPreviewPOSTRouteHandler`, `createPreviewOPTIONSRouteHandler` | `@uniformdev/next-app-router/handler` |\n| Client context | `createClientUniformContext`, `useInitUniformContext`, `ClientContextComponent` | `@uniformdev/next-app-router-client` |\n| Canvas | `enhance`, `EnhancerBuilder`, `ASSETS_SOURCE_*`, `LinkParamValue`, `RichTextParamValue` | `@uniformdev/canvas` |\n| Assets | `imageFrom` (default for an image `src`), `AssetParamValue`, `AssetParamValueItem`, `AssetClient` | `@uniformdev/assets` |\n\n## Resources\n\nSee `references/` for detailed guidance:\n- [Setup](references/setup.md) — Prerequisites, env vars, packages, file structure, server config, `next.config.ts`, basic middleware, composition and playground routes, manifest\n- [Routing](references/routing.md) — Advanced middleware: `handleUniformRoute`, quirks injection, locale handling, custom route mapping, query keys, moving the page, matcher scoping, consent, releases\n- [Components](references/components.md) — `resolveComponent`, typed parameters, `UniformText`/`UniformRichText` props, slots, assets, and type definitions\n- [Personalization](references/personalization.md) — Client context, `useQuirks`/`useScores` hooks, custom client context component, server-side precomputation, Vercel geo-IP quirks\n- [Advanced](references/advanced.md) — Next.js 16 `cacheComponents`, suspense/streaming, enhancing composition data, composition cache, adapter compatibility mode, server clients\n- [Preview](references/preview.md) — Contextual editing handler (GET) and ISR handler (POST), playground route\n"
}SHA-256 of public snapshot: 4cb9c1047265e0b70f3bf69f9581c49df352eb7f0695c116720444d0b6eeb714