# Uniform SDK for Next.js App Router Best Practices

> Recommendations for apps that use the Uniform SDK for Next.js App Router.

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

## Best practices

1. **Use TypeScript.** Give each parameter the type `ComponentParameter<T>`, and give the slots a union of string literals.
2. **Make all parameters optional.** Use `?` for each parameter type. A parameter can be `undefined`, also when the Uniform component definition marks it as required.
3. **Keep client components small.** `"use client"` makes the component and all its children client components. Put it only on the smallest components that use the browser, for example a quirk button or a score display. Keep page layouts and content components as server components.
4. **Use edge mode for personalization above the fold.** In lite mode, the visitor sees the default variant first, and then the change. Edge mode shows the correct variant on the first paint. Refer to [Edge mode execution](./edge-mode).
5. **Do not read `searchParams`, cookies or headers on published pages.** These calls make the route dynamic. Then Next.js renders it on each request. The middleware already writes the request state into the code.
6. **List only the query strings that change the content.** Each value of a listed query string makes a new cached page. Refer to [Keep query strings in the route](https://docs.uniform.app/docs/sdk/nextjs-app-router/middleware#keep-query-strings-in-the-route).
7. **Use ISR.** Start with an empty `generateStaticParams`, so each page renders on its first visit. Prerender only the most important pages. Refer to [Static generation (ISR)](./incremental-static-regeneration-isr).
8. **Make the static params agree with the middleware.** Give `createUniformStaticParams` the same `rewrite`, `locale`, `edgeMode` and `defaultConsent` values as the middleware. Else the prebuilt pages are not used.
9. **Set `defaultConsent` in `uniform.server.config.ts`.** Your file replaces the default configuration. Without the option in your file, the default consent is `false`.
10. **Do not put content for search engines behind visibility rules.** Components with visibility rules render only in the browser.
11. **Use `flattenValues` for assets and content blocks.** Use `flattenValues` from `@uniformdev/canvas` for asset parameters. Refer to [asset parameters](../parameter-utilities/asset-parameters).
12. **Return a fallback from `resolveComponent`.** Return a fallback component for unknown component types. Then a new type in Uniform does not break the page.
13. **Secure the webhook handler.** Set `UNIFORM_PREVIEW_SECRET`, `UNIFORM_WEBHOOK_SECRET`, or the two variables. Refer to [Secure the webhook](./caching#secure-the-webhook).