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

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.

7. Use resolveComponent fallback -- Always return a fallback component from resolveComponent to gracefully handle unknown component types.