# Vercel  - GrackerAI Portal

This guide covers various Vercel integration scenarios for GrackerAI's  content marketing platform, including subpath routing, custom domains, and deployment configurations.

## Subpath Routing with Vercel

Vercel supports reverse proxying through framework-specific configurations or a universal `vercel.json` file. Here are both approaches:

### Next.js Configuration (Recommended for Next.js projects)

If you're using Next.js, you can configure rewrites in your `next.config.js` file:

```javascript
// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/portal',
        destination: 'https://portal.pseo.one/',
      },
      {
        source: '/portal/:path*',
        destination: 'https://portal.pseo.one/:path*',
      },
    ]
  },
}
```

### Vercel.json (Framework-agnostic)

For any framework, you can use `vercel.json` in your project root:

```json
{
  "rewrites": [
    {
      "source": "/portal",
      "destination": "https://portal.pseo.one/"
    },
    {
      "source": "/portal/(.*)",
      "destination": "https://portal.pseo.one/$1"
    }
  ]
}
```

## How It Works

1. Next.js Method: The `rewrites()` function in `next.config.js` handles the proxying at the application level.
2. Vercel.json Method: Vercel's infrastructure handles the rewrites before the request reaches your application.

## Key Differences

- Next.js Method: Better for dynamic routing and works with Next.js's development server.
- Vercel.json Method: Works with any framework but requires deployment to see changes.

## Custom Domain Setup with Vercel

When using custom domains with Vercel, you may need to add verification records:

1. Domain Configuration
   ```
   Type: CNAME
   Name: portal
   Value: portal.pseo.one
   ```

## Related Resources

- [Custom Domain Setup Guide](/docs/custom-domain)
- [Cloudflare Integration](/docs/cloudflare)
- [Route53 & CloudFront Setup](/docs/route53-cloudfront)