Vercel Preview Links break when moving from NextJS v13 to v14

[richhorrocks]

I’m working on a project with several standalone apps, all of which were built using Next’s Pages Router on NextJS version 13.

We use Vercel’s preview links for testing new deployments before they are released to staging and production.

Recently we moved one of the apps to NextJS version 14, which caused the preview link to stop working - it now resolves to a public deployment, rather than the unreleased preview.

After some investigation, it appears that NEXT_PUBLIC_APP_URL is no longer set correctly in the version 14 case. Downgrading the app back to version 13 fixes the issue and the preview link works as expected.

I’ve gone through the NextJS migration guide to no avail. If anyone has any suggestions, they’d be much appreciated.

[swarnava (Swarnava Sengupta)]

Hey,

You can create NEXT_PUBLIC_WEBSITE_URL and use $VERCEL_URL to point them. We have a community post that you can refer:

Create a WEBSITE_URL env variable for all environments

Overview When deploying a Next.js application on Vercel, you may need to access your website url in code to craft URLs and links to your apps for various needs. Use cases: Create a magic login link and send it via email Crafting a webhook URL to be called by an external API Configuring OAuth in all environments Testing Open Graph in all environments Create absolute URLs for various application needs Add canonical URLs The URL requirements are usually: It must be available in server (Route…