# Recipes for the Next.js App Router SDK

> Short, complete solutions for frequent tasks in a Next.js App Router app with Uniform.

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

Each recipe gives a solution for one task, with complete code. The recipes start from the app of the [Tutorial](https://docs.uniform.app/docs/sdk/nextjs-app-router/tutorial).

## Routing, data and locales

| Recipe | Task |
| --- | --- |
| [Resolve compositions on a page](https://docs.uniform.app/docs/sdk/nextjs-app-router/resolving-compositions) | Render more than one composition, change composition data before render, or render a composition in an ordinary Next.js route. |
| [Localize your app](https://docs.uniform.app/docs/sdk/nextjs-app-router/localization) | Show each page in the correct locale, in the live site, the preview and the static build. |
| [Call Uniform APIs on the server](https://docs.uniform.app/docs/sdk/nextjs-app-router/server-clients) | Get compositions, routes, project map nodes and the manifest with the Next.js data cache. |

## Pages and layout

| Recipe | Task |
| --- | --- |
| [Global header and footer](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/global-header-footer) | Show a header and a footer that authors manage in Uniform on all pages. |
| [SEO](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/seo) | Set the page title and description from the composition, make a sitemap from the project map, and set canonical URLs. |
| [Custom 404 page](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/not-found) | Show a 404 page, with content from Uniform if you want. |
| [Hybrid pages](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/hybrid-pages) | Add Uniform regions to pages that are built in Next.js already. |

## Components

| Recipe | Task |
| --- | --- |
| [Images](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/images) | Show image parameters with `next/image`. |
| [Links](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/links) | Show link parameters with `next/link`. |
| [Data fetching](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/data-fetching) | Get more data in a component, for example from a product API. |
| [Client components](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/client-components) | Put an interactive component in a slot. |
| [Forms](https://docs.uniform.app/docs/sdk/nextjs-app-router/recipes/forms) | Put a form in a slot, and send it to a Server Action. |