Developing locally with Next.js App Router SDK

Local development tips#

This page tells you how the SDK behaves under next dev, and how to see your content changes fast.

The resolvers do not cache in development#

When NODE_ENV is development, the resolvers of @uniformdev/next-app-router do not use the Next.js data cache. They get the route and the composition from Uniform on each request. Thus a page shows newly published content when you load it again. The 'use cache' resolvers of @uniformdev/next-app-router/cache are different: they keep published results also in development.

The Context manifest is different. UniformContext gets the published manifest with force-cache, also in development. If a new signal or test does not work locally, do a hard reload of the page in the browser. If that does not help, delete the .next folder:

See draft content#

You do not have to publish content to see it locally. In Next.js draft mode, the SDK gets draft content and does not use the cache.

To enable draft mode, open your local app from the Uniform preview panel:

1. Open a composition in Canvas.
2. Open the preview panel.
3. From the menu of the preview panel, select Open in new window.

Open in a new window

The preview handler enables Next.js draft mode and opens the page. While draft mode is on:

• The SDK gets draft content.
• The resolvers do not use the cache.
• The browser chooses the personalization and test variants. Edge mode does not apply to draft requests.

To turn off draft mode, open /api/preview?disable=true&path=/ in the same browser.

Edge mode under next dev#

The Vercel edge middleware works under next dev, without the Vercel runtime cache:

• vercelManifestProvider gets the manifest from the Uniform API, and keeps a copy in memory.
• vercelEdgeRouteStore keeps its records in memory.
• expireVercelRuntimeCacheTags does nothing.

To use the Vercel runtime cache locally, set RUNTIME_CACHE_ENDPOINT.

Under next dev, Next.js shows deprecation warnings for middleware.ts and for the edge runtime. These warnings are expected. Refer to Keep middleware.ts on the edge runtime.

Do a test of edge mode locally#

Edge personalization uses a published page from the cache, so do the test on a production build:

1. Build and start the app:

   npm run build && npm run start

   CopyCopied!

2. Open a page that has a personalization, with a URL that activates a signal. For example, http://localhost:3000/?utm_campaign=launch for a signal that reads the utm_campaign query string.

3. Look at the HTML of the response. It must contain only the personalized variant:

   curl -s "http://localhost:3000/?utm_campaign=launch" | grep -o '__UNIFORM_DATA__[^<]*'

   CopyCopied!

   The __UNIFORM_DATA__ script contains the scores of the visitor.

Summary#