I’m deploying a full-stack NextJS project to Vercel for the first time. I use typescript (partially), sass, prisma, as some of the main libraries. When building locally, everything works fine. However, when deploying to Vercel, the build logs suggest it’s successful but then going to the URL reveals that it hasn’t worked.

It first seemed like none of the styling occurred (i.e. sass wasn’t transpiling? correctly). However, I don’t think this is the case as some components have styling.

When attempting to navigate to a different page, the page doesn’t change. In fact, I can go to any route e.g. ‘[domain]/blah’ and it’ll take me to the same broken page.

Any ideas why this might be? Very lost at the moment and not sure of my next steps. I am getting some console errors but can’t find out where the missing ‘<‘ would be.

Broken (what I see on vercel deployment)

Expected (what I see locally after npm run build & npm start)

Build summary

Config Files

Here are some code snippets of my config files

next.config.mjs

import path from 'path';
import { fileURLToPath } from 'url';
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
 
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};
 
export default nextConfig;

vercel.json

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next",
      "config": {
        "includeFiles": [
          "prisma/**"
        ]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "strictNullChecks": true
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

{
  "name": "chex_map_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --list-different --config ./.prettierrc.json"
  },
  "dependencies": {
    "@prisma/client": "^5.12.1",
    "axios": "^1.6.8",
    "bcryptjs": "^2.4.3",
    "jose": "^5.2.4",
    "mapbox-gl": "^3.2.0",
    "next": "14.1.2",
    "prisma": "^5.12.1",
    "react": "^18",
    "react-dom": "^18.3.1",
    "react-map-gl": "^7.1.7",
    "uuidv4": "^6.2.13"
  },
  "devDependencies": {
    "@playwright/test": "^1.42.1",
    "@types/bcryptjs": "^2.4.6",
    "@types/node": "^20.12.2",
    "@types/react": "18.2.79",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.1.2",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.34.1",
    "prettier": "^3.2.5",
    "sass": "^1.72.0"
  },
  "engines": {
    "node": ">=18.17.0",
    "npm": ">=9.6.0"
  }
}