# Uniform SDK for Next.js App Router Reference

> Comprehensive guide to integrating Uniform with Next.js App Router, including setup, component development, personalization, and advanced patterns.

Source: https://docs.uniform.app/docs/sdk/nextjs-app-router/reference

## SDK Reference

### @uniformdev/next-app-router

Server-only core exports:

| Export | Description |
| --- | --- |
| `UniformComposition` | Main composition renderer component |
| `UniformPlayground` | Playground composition renderer |
| `resolveRouteFromCode` | Resolves a route from the serialized code |
| `resolvePlaygroundRoute` | Resolves a playground route |
| `precomputeComposition` | Evaluates personalizations/tests server-side |
| `createUniformStaticParams` | Generates static params for ISR |
| `createUniformPlaygroundStaticParams` | Generates playground static params |
| `createCompositionCache` | Creates a composition cache instance |
| `findRouteMatch` | Matches URL patterns for custom routing |
| `getCompositionDeliveryClient` | [`CompositionDeliveryClient`](https://docs.uniform.app/docs/sdk/content-api-clients) |
| `getRouteClient` | [Route API client](https://docs.uniform.app/docs/sdk/route-client) |
| `getManifest` / `getManifestClient` | Manifest data access |
| `getProjectMapClient` | [Project Map API client](https://docs.uniform.app/docs/sdk/project-map-client) |
| `ResolveComponentFunction` | Type for the component resolver function |
| `ResolveComponentResult` | Type for the resolver return value |
| `UniformPageParameters` | Type for page component props |
| `PlaygroundParameters` | Type for playground component props |

### @uniformdev/next-app-router/component

Component utilities (can be used in server and client components):

| Export | Description |
| --- | --- |
| `UniformSlot` | Renders child components from a slot |
| `UniformText` | Renders text parameters with inline editing |
| `UniformRichText` | Renders rich text parameters |
| `getUniformSlot` | Extracts slot items as ReactNode array |
| `ComponentProps` | Type for component props |
| `ComponentParameter` | Type wrapper for parameter values |
| `ComponentContext` | Type for component metadata |
| `useUniformContext` | Hook: access Uniform Context instance |
| `useQuirks` | Hook: reactive quirk values |
| `useScores` | Hook: reactive score values |

### @uniformdev/next-app-router/middleware

| Export | Description |
| --- | --- |
| `uniformMiddleware` | Creates middleware handler with options |
| `handleUniformRoute` | Direct middleware handler function |

### @uniformdev/next-app-router/config

| Export | Description |
| --- | --- |
| `withUniformConfig` | Wraps Next.js config with Uniform aliases |
| `UniformServerConfig` | Type for server configuration |

### @uniformdev/next-app-router/handler

| Export | Description |
| --- | --- |
| `createPreviewGETRouteHandler` | GET handler for preview API route |
| `createPreviewPOSTRouteHandler` | POST handler for preview API route |
| `createPreviewOPTIONSRouteHandler` | OPTIONS handler for preview API route |

### @uniformdev/next-app-router/compat

| Export | Description |
| --- | --- |
| `createAdapterResolveComponentFunction` | Creates adapter-mode component resolver |
| `ResolveComponentResultWithType` | Type for adapter mappings |
| `UniformText` | Adapter-compatible UniformText |

### @uniformdev/next-app-router-client

Client-side only (use for custom client context):

| Export | Description |
| --- | --- |
| `createClientUniformContext` | Creates client-side Context instance |
| `useInitUniformContext` | Hook: initializes Context on mount |
| `ClientContextComponent` | Type for custom client context components |

### @uniformdev/canvas

| Export | Description |
| --- | --- |
| `flattenValues` | Extracts values from asset parameters |
| `AssetParamValue` | Type for asset parameter values |
| `LinkParamValue` | Type for link parameter values (includes optional `attributes` with editor-set [custom link attributes](https://docs.uniform.app/docs/guides/models/components/parameters#link)) |
| `RichTextParamValue` | Type for rich text parameter values |

### @uniformdev/canvas-react

| Export | Description |
| --- | --- |
| `linkParamValueToAnchorProps` | Converts a `LinkParamValue` to React anchor props: derives the `href` (including anchors and `mailto:`/`tel:` prefixes), includes sanitized custom link attributes, and translates `class` to `className` |

### @uniformdev/richtext

| Export | Description |
| --- | --- |
| `linkParamValueToHref` | Converts a `LinkParamValue` to a `href` string |
| `linkParamValueToHtmlAttributes` | Converts a `LinkParamValue` to a sanitized HTML attribute record (for non-React output) |

---

## Type definitions

### ComponentProps

```ts
type ComponentProps<
  TParameters extends Record<string, ComponentParameter> | unknown,
  TSlotNames extends string = string,
> = {
  type: string;
  variant: string | undefined;
  slots: Record<TSlotNames, SlotDefinition>;
  parameters: TParameters;
  component: ComponentContext;
  context: CompositionContext;
};
```

### ComponentContext

```ts
type ComponentContext = {
  _id: string;
  _parentId: string | null;
  slotName: string | undefined;
  slotIndex: number | undefined;
};
```

### CompositionContext

```ts
type CompositionContext = {
  _id: string;
  type: string;
  state: number;
  isContextualEditing: boolean;
  matchedRoute: string;
  dynamicInputs: Record<string, string>;
  pageState: PageState;
};
```

### SlotDefinition

```ts
type SlotDefinition = {
  name: string;
  items: ({
    _id: string;
    $pzCrit: VariantMatchCriteria | undefined;
    variantId: string | undefined;
    component: ReactNode;
  } | null)[];
};
```

### ComponentParameter

```ts
type ComponentParameter<TValue = unknown> = BaseComponentParameter<TValue> & {
  parameterId: string;
  _contextualEditing?: { isEditable: boolean };
};
```

### UniformServerConfig

```ts
type UniformServerConfig = {
  defaultConsent?: boolean;
  playgroundPath?: string;
  context?: {
    disableDevTools?: boolean;
  };
  quirkSerialization?: boolean;
  middlewareRuntimeCache?: boolean;
  experimental?: {
    vercelVisualEditing?: boolean;
    disableSwrMiddlewareCache?: boolean;
  };
};
```

### CacheMode

```ts
type CacheMode =
  | { type: RequestInit["cache"] }        // "force-cache", "no-cache", "no-store", etc.
  | { type: "revalidate"; interval: number }; // Time-based revalidation in seconds
```