Problem Statement

After upgrading to Next.js 16 and Uniform SDK v2, you may encounter issues where component pattern previews fail to load in Canvas. This typically manifests as contextual editing errors and preview failures in the design tool interface.

Solution

To resolve component pattern preview issues after upgrading to SDK V2, follow these steps:

1. Add the Missing Configuration File

Ensure you have the uniform.server.config.ts file in your project root. This file was recently added to the SDK V2 examples and is required for proper preview functionality.

You can reference the configuration from the Uniform SDK V2 examples repository.

2. Update Middleware for Localized Redirects

If you're using localized paths with redirects, update your middleware to exclude playground paths from locale redirection:

if (!isLocaleInPath(pathname) && !pathname.startsWith('/playground')) {
    request.nextUrl.pathname = `/${intl.defaultLocale}${pathname}`;
    return NextResponse.redirect(request.nextUrl);
}

This prevents unnecessary redirection of /playground to [default_locale]/playground and allows the path to pass through to the handleUniformRoute middleware function.

3. Verify Preview and Playground Setup

Ensure your preview and playground configuration matches the SDK V2 example structure. The configuration should point to the correct defaults that align with the source files in \node_modules\@uniformdev\next-app-router\dist\config\default.mjs.

4. Test Local Preview

After making these changes, test whether you can load the pattern preview in your local running application (localhost) to verify the configuration is working correctly.

Note: For data enhancement in playground previews, additional configuration may be required. Contact support if you continue to experience issues with data enhancement not working in playground mode after following these steps.