# Uniform SDK for Next.js App Router Best Practices

> 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/best-practices

## Best practices

1. **Use TypeScript** -- The SDK is TypeScript-first. Type all parameters with `ComponentParameter<T>` and slots with string literal union types.
2. **Mark parameters as optional** -- Always use `?` for parameter types. Parameters can be `undefined` even when marked required in the Uniform dashboard.
3. **Push `"use client"` as far down the tree as possible** -- The `"use client"` directive (a React Server Components concept, not Uniform-specific) turns a component and all its children into client components. Only add it to the smallest leaf components that truly need browser APIs (e.g., a quirk button, a score display). Keep page layouts and content components as server components for faster rendering and less JavaScript.
4. **Use ISR for performance** -- Configure `generateStaticParams()` for your most-visited paths to serve pre-rendered pages. See details in the ISR section [here](./incremental-static-regeneration-isr)
5. **Avoid dynamic functions at the top of pages** -- Keep `cookies()`, `headers()`, or other dynamic Next.js functions in components deeper in the tree, wrapped in `Suspense`, to maximize static rendering.
6. **Use `flattenValues` for assets and content blocks** -- Always use `flattenValues` from `@uniformdev/canvas` for asset parameters. See more details in designated guide [here](../parameter-utilities/asset-parameters).
7. **Use `resolveComponent` fallback** -- Always return a fallback component from `resolveComponent` to gracefully handle unknown component types.