I’m seeking assistance with deploying my project to Vercel. Initially, the project was deployed as a Create React App (CRA) in production, but now I’m integrating it with Next.js. Locally, I’ve had success building and running the application, and deploying it on Vercel also seems to be working fine. However, I’m encountering a 404 error when running reliability checks with Checkly.

Here’s the code I’ve added to support the deployment:

vercel.sh

#!/bin/bash

if [[ $VERCEL_ENV == "production" ]]; then
  npm run build:production
else
  npm run build:preview
fi

vercel.json

{
  "builds": [{ "src": "vercel.sh", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "/" }]
}

next-config.mjs

const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json

"scripts": {
    "start": "next dev",
    "build:preview": "npm install && next build",
    "build:production": "react-scripts build",
    "test": "jest",
    "eject": "next eject",
    "lint": "next lint",    
  },