Next.js links reload whole page after deploying on vercel

Help
,
1

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;
2

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

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

3

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.

4

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

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

image
image1880×1876 268 KB

5

@jacobparis 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?

6

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

2 Likes
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.