Next.js App Router SDK 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.

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.

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).

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.

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.