Next.js links reload whole page after deploying on vercel

I've deployed a full stack app with next.js for frontend and express.js for the backend using a monorepo.

When I click on any link on the page, the whole page reloads although I am using next/link

This is vercel.json at the root level

{
  "builds": [
    { 
      "src": "frontend/package.json", 
      "use": "@vercel/next" 
    },
    { 
      "src": "backend/index.js", 
      "use": "@vercel/node",
      "config": {
        "buildCommand": "npm run build"
      }
    }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/backend/index.js" },
    { "src": "/(.*)", "dest": "/frontend/$1" }
  ]
}

This is package.json at the root level

{
    "name": "my-estate",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "dev": "concurrently \"npm run dev --prefix frontend\" \"npm run dev --prefix backend\""
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "devDependencies": {
      "concurrently": "^9.1.2"
    }
  }

https://my-estate-app.vercel.app/ next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: ['res.cloudinary.com', 'plus.unsplash.com'],
        // loader: 'cloudinary',
        // path: 'https://res.cloudinary.com/my-username/image/upload',
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'images.pexels.com',
                pathname: '**',
            },
        ],

    },
};

export default nextConfig;

If you're having trouble deploying an Express app, this guide can help.

https://vercel.com/guides/using-express-with-vercel

You can also ask v0 for suggestions tailored to your own project setup.

I also got this warning in console

The resource at “https://my-estate-app.vercel.app/_next/static/media/569ce4b8f30dc480-s.p.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Vercel Staff

I was able to reproduce this based your vercel.json file

The builds property is deprecated and degrades a few things, including client side navigation it seems. The recommended way to implement this is using Vercel's Monorepo Support

Delete your vercel.json file
Set the framework to Next.js and the root directory to /frontend
Create a separate project on Vercel for your backend. This can be the same git repository, just with a different root directory set.

There's a problem with this approach that the cookies from backend will not be saved on the browser for authentication because of different domains... Isn't there a way to deploy using a monorepo?

Vercel Staff

The canonical way to set this up is to use your Next.js API routes as a same-origin backend which can return cookies to your browser, then you can talk from those API routes to your external backend if needed using server<->server auth like a bearer token.

If you do want to return cookies from the other backend, that works as long as you have them on the same domain (they can have different subdomains, like www and api)

I'll check internally to see if there's a specific fix for the navigations on the legacy build API, but if you're working on a new project the closer you can keep it to the latest vercel APIs the more nicely everything will work together

This topic is closed. It no longer accepts new replies.

{ "builds": [ { "src": "frontend/package.json", "use": "@vercel/next" }, { "src": "backend/index.js", "use": "@vercel/node", "config": { "buildCommand": "npm run build" } } ], "routes": [ { "src": "/api/(.*)", "dest": "/backend/index.js" }, { "src": "/(.*)", "dest": "/frontend/$1" } ] }

{ "name": "my-estate", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "concurrently \"npm run dev --prefix frontend\" \"npm run dev --prefix backend\"" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "concurrently": "^9.1.2" } }

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { domains: ['res.cloudinary.com', 'plus.unsplash.com'], // loader: 'cloudinary', // path: 'https://res.cloudinary.com/my-username/image/upload', remotePatterns: [ { protocol: 'https', hostname: 'images.pexels.com', pathname: '**', }, ], }, }; export default nextConfig;