Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jason-AML/MonzaSport-Nextjs/llms.txt

Use this file to discover all available pages before exploring further.

Monza Motors is designed to run on Vercel from day one. The project ships with @vercel/analytics pre-installed, and the checkout route automatically derives the correct redirect URL from Vercel’s built-in VERCEL_URL environment variable in production — so there’s nothing extra to wire up. A fresh deployment typically takes about 5 minutes from first import to a live .vercel.app URL.

​
Prerequisites

Vercel Account

Sign up at vercel.com if you don’t have an account. The Hobby tier is sufficient for development and personal projects.

Supabase Project

Your Supabase project must be created and tables must be in place before deploying. Follow the Supabase Setup guide first.

Stripe Account

You’ll need a Stripe account with a secret key. Retrieve it from the Stripe Dashboard under Developers → API keys.

​
Deploy steps

1

Push to GitHub

Vercel imports projects directly from Git. Make sure your Monza Motors codebase is pushed to a repository on GitHub, GitLab, or Bitbucket. If you’re working from a fork, push to your own remote before proceeding.
git add .
git commit -m "Initial commit"
git push origin main
2

Import to Vercel

Go to vercel.com/new, sign in, and click Add New → Project. Select your repository from the list and click Import. Vercel will automatically detect the Next.js framework and pre-fill the build settings — leave them at their defaults.
3

Set environment variables

Before clicking Deploy, open the Environment Variables section in the project configuration screen and add the following variables:
VariableDescription
NEXT_PUBLIC_SUPABASE_URLYour Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEYYour Supabase anon/public API key
SUPABASE_SERVICE_ROLE_KEYYour Supabase service role key (keep secret)
NEXT_STRIPE_SECRET_KEYYour Stripe secret key
GROQ_API_KEYYour Groq API key for the AI assistant
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
NEXT_STRIPE_SECRET_KEY=sk_live_...
GROQ_API_KEY=gsk_...
You do not need to set NEXT_PUBLIC_BASE_URL in production. Vercel automatically injects the VERCEL_URL variable at build time, and the checkout route uses it to construct the correct redirect URLs. NEXT_PUBLIC_BASE_URL is only required when running locally in development.
4

Deploy

Click Deploy. Vercel will clone your repository, install dependencies, and run:
npm run build
The build output will stream in real time. A successful build completes with a “Congratulations” screen and your new .vercel.app URL.
5

Verify

Open your live .vercel.app URL and confirm the following pages load correctly:
  • Home page — hero section and featured vehicles render
  • Collection page — vehicle grid populates from Supabase
  • Login / Register pages — Supabase Auth forms are accessible
If the collection page is empty, make sure you have at least one row in the vehiculos table. See the Supabase Setup guide for how to seed sample data.

​
Production vs. development URLs

The checkout API route at src/app/api/checkout/route.js uses a conditional baseUrl to determine where Stripe redirects the user after payment: 
const baseUrl =
  process.env.NODE_ENV === 'production'
    ? `https://${process.env.VERCEL_URL}`
    : process.env.NEXT_PUBLIC_BASE_URL;
In production, Vercel injects VERCEL_URL automatically at build time. It contains the deployment’s canonical hostname — for example, monza-motors.vercel.app — without a protocol prefix, which is why https:// is prepended explicitly. This means Stripe’s success_url and cancel_url always point to the correct deployment, even for Preview Deployments that have unique generated URLs. In local development, you must set NEXT_PUBLIC_BASE_URL in your .env.local file: 
NEXT_PUBLIC_BASE_URL=http://localhost:3000

​
Vercel Analytics

@vercel/analytics (version ^2.0.1) is already listed as a dependency and the <Analytics /> component is wrapped into the root layout. No additional configuration is required. Analytics activates automatically when the app runs on Vercel infrastructure and begins reporting page views, Web Vitals scores, and audience data in the Vercel dashboard under the Analytics tab of your project. If you run the app outside of Vercel (e.g., a self-hosted Node server), the analytics script will simply no-op — it won’t throw errors or affect performance.

​
Custom domain

To use a custom domain instead of the generated .vercel.app address:
  1. Open your project in the Vercel Dashboard.
  2. Go to Settings → Domains.
  3. Enter your domain (e.g., monzamotors.com) and follow the DNS configuration instructions.
Vercel automatically provisions a TLS certificate via Let’s Encrypt once the DNS records propagate.
Use Vercel’s Preview Deployments to test every change before it reaches production. Each pull request automatically receives its own isolated preview URL (e.g., monza-motors-git-feat-new-filter-yourname.vercel.app), complete with its own build logs and environment variables. Merge to main only after you’ve verified the preview looks correct.

Build docs developers (and LLMs) love

Get started for freeTalk to us