# uniform-nextjs-app-router

> Claude/Codex skill by [@uniformdev](https://omgskills.com/library/uniformdev/index.md) · 2 stars · Updated 2026-10-08

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.

## Install

```sh
git clone https://github.com/uniformdev/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/uniform-nextjs-app-router ~/.claude/skills/uniform-nextjs-app-router
```

## From README

Uniform with Next.js App Router Integration 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). Requirements Next.js 16+ and App Router only (this v2 SDK does not support the Page Router). Node.js 22+. A Uniform project with compositions. On Next.js 15 + Page Router, use the Page Router SDK instead. Migrating Page Router → App Router? Contact Uniform support. Scaffold a working project instead of integrating from scratch: Select Next.js, then the Component Starter Kit (full-featured) or Hello World (minimal). Otherwise follow the manual in references/ .md. Required packages @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. Architecture essentials Middleware is required.

## Links

- HTML page: https://omgskills.com/library/uniformdev/agent-skills/skills/uniform-nextjs-app-router/
- GitHub: https://github.com/uniformdev/agent-skills
- Author: [@uniformdev](https://omgskills.com/library/uniformdev/index.md)

## More from this repo

- [uniform-content-modeling](https://omgskills.com/library/uniformdev/agent-skills/skills/uniform-content-modeling/index.md) — Best practices for content modeling in Uniform — designing content types with well-chosen fields, validations, and...
   - [@uniformdev](https://omgskills.com/library/uniformdev/index.md) · 2 stars
- [uniform-enrichment-recommendations](https://omgskills.com/library/uniformdev/agent-skills/skills/uniform-enrichment-recommendations/index.md) — Used to add personalized, relevance-ranked content recommendations to a Uniform + React/Next.js project by boosting...
   - [@uniformdev](https://omgskills.com/library/uniformdev/index.md) · 2 stars
- [uniform-experience-modeling](https://omgskills.com/library/uniformdev/agent-skills/skills/uniform-experience-modeling/index.md) — Best practices for experience modeling in Uniform — designing component definitions with well-chosen parameters, slots,...
   - [@uniformdev](https://omgskills.com/library/uniformdev/index.md) · 2 stars