Vercel.json File for Reference

If you're encountering hosting issues on Vercel, such as API routes not functioning correctly or environment variables not loading, here are some example configurations for the vercel.json file. This guide provides potential configurations for rewrites, routes, and environment variables that might help resolve common issues.

Basic Rewrite Configuration

This configuration is a simple rewrite that sends all requests to the root of your application. This can be useful if you’re trying to ensure all routes are handled by Next.js.

{
    "rewrites": [
        { "source": "/(.*)", "destination": "/" }
    ]
}

Advance Configurations:

{
  "version": 2,
  "builds": [
    {
      "src": "next.config.js",
      "use": "@vercel/next"
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/app/api/:path*"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    }
  ],
  "env": {
    "NEXT_PUBLIC_CLERK_FRONTEND_API": "<your-clerk-frontend-api-key>",
    "CLERK_API_KEY": "<your-clerk-api-key>",
    "NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY": "<your-liveblocks-public-key>",
    "LIVEBLOCKS_SECRET_KEY": "<your-liveblocks-secret-key>"
  }
}

Explanation of Configuration

1. version: Defines the version of the Vercel configuration schema.
2. builds: Specifies the framework being used. Here, it points to the next.config.js file and specifies the Next.js build type (@vercel/next).
3. rewrites: Maps API requests from /api/:path* to the correct directory structure, which is /app/api/:path* in this example. This is useful if your API routes are located in a nested folder structure.
4. routes: Adds custom routes for API handling, forwarding requests to the correct API paths.
5. env: Defines environment variables necessary for external integrations, like Clerk and

Troubleshooting

If issues persist, try the following:

1. Check Logs: Review your Vercel deployment logs for specific error messages.
2. Verify Environment Variables: Confirm that environment variables are correctly set in the Vercel dashboard.
3. Deployment Settings: Ensure that the vercel.json file is in the root directory of your project.