Vercel

Vercel - GrackerAI Portal

This guide covers various Vercel integration scenarios for GrackerAI's cybersecurity 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:

// 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:

{
  "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