# Adapter compatibility mode with the Next.js App Router SDK

> Use v1-style flattened component props with the Next.js App Router SDK.

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

> **Developer Preview:**
>
> This page documents the developer preview of the SDK, version `20.81.1-alpha.25.sha-f076f9b857`.

The adapter layer gives parameter values directly as props, not in `parameters`. Use it when you move components from an older Uniform SDK:

`components/resolveComponent.ts`

```ts
import { createAdapterResolveComponentFunction } from "@uniformdev/next-app-router/compat";
import { pageMapping } from "./page";

export const resolveComponent = createAdapterResolveComponentFunction({
  mappings: {
    page: pageMapping,
  },
});
```

`components/page.tsx`

```tsx
import type { ComponentProps, ResolveComponentResultWithType } from "@uniformdev/next-app-router/compat";

type PageProps = { title?: string };

const Page = ({ title }: ComponentProps<PageProps, "content">) => <h1>{title}</h1>;

export const pageMapping: ResolveComponentResultWithType = {
  type: "page",
  component: Page,
  mode: "adapted",
};
```

The SDK finds a mapping by its `type` field, not by the key in `mappings`. In the adapted mode, the SDK takes the values from the `ComponentParameter` wrappers and gives them as props. The original parameters stay in `component.parameters`. A type that has no mapping renders "Not implemented".

`@uniformdev/next-app-router/compat` also exports `UniformText`, which takes `parameterId` in place of `parameter`.
