Vercel deployment

Deploy KilatKoding to Vercel with a clear env, auth callback, payment webhook, and post-launch validation checklist.

Why Vercel is the most natural path

KilatKoding uses Next.js App Router without a custom server requirement. Because of that, Vercel is usually the fastest deployment path, especially if you want preview deployments, custom domains, and clean env management.

Before you begin

Make sure these are already true:

• the repo can build locally,
• npm run env:check looks correct for the active features,
• the production domain is already chosen,
• provider accounts such as Supabase, Midtrans, Doku, Resend, and the AI provider are ready if used.

Deployment steps

1. Create a Vercel project

   Import the KilatKoding repo into Vercel. The default Next.js build command and output are usually detected automatically.

2. Fill environment variables

   Copy the relevant env values from .env.local or another secure source into Vercel. Focus only on the features that stay active.

3. Set NEXT_PUBLIC_APP_URL to the production domain

   Do not leave it as http://localhost:3000. This value is used for metadata, callbacks, and order URLs.

4. Run the first deployment

   Deploy and make sure the build succeeds.

5. Attach the production domain

   After the domain is active, redeploy if needed so the live URL is fully consistent.

Env groups that are usually needed

Group	Core env
Supabase	NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, SUPABASE_SERVICE_ROLE_KEY
App URL	NEXT_PUBLIC_APP_URL
Midtrans payments	PAYMENT_PROVIDER=midtrans, MIDTRANS_SERVER_KEY, NEXT_PUBLIC_MIDTRANS_CLIENT_KEY
Doku payments	PAYMENT_PROVIDER=doku, DOKU_CLIENT_ID, DOKU_SECRET_KEY
Email	RESEND_API_KEY, EMAIL_FROM, optional CONTACT_EMAIL
Admin	ADMIN_EMAILS
AI	AI_DEFAULT_PROVIDER, OPENAI_API_KEY or ANTHROPIC_API_KEY

After deployment, do not forget provider-side config

Supabase

Add these production URLs in redirect configuration:

https://your-domain.com/auth/confirm
https://your-domain.com/auth/update-password

Midtrans

Register the production webhook:

https://your-domain.com/api/webhooks/midtrans

Make sure the user return URL still points to your order page.

Doku

Register the production webhook:

https://your-domain.com/api/webhooks/doku

Resend

Verify the sender domain and make sure EMAIL_FROM uses a verified domain.

Post-deploy validation

At minimum, check:

1. the homepage loads,
2. login and signup work,
3. /dashboard opens for a logged-in user,
4. /dashboard/billing works if payments are active,
5. /admin is reachable for admins if admin is active,
6. GET /api/health matches expectations,
7. one sandbox payment and one webhook test succeed if payments are active.

Most common gotchas

Problem	Usual cause
Auth callback fails	Supabase redirect URLs still point to the wrong domain
Checkout completes but the subscription is not active	The provider webhook still points to the old domain or signature verification fails
Contact form does not send	The Resend sender domain is not verified
Health check is degraded	An active feature is still missing required env
The order page still uses localhost	NEXT_PUBLIC_APP_URL was not updated

Preview deployment vs production

Preview deployments are great for UI review, but:

• do not use a preview URL as the final auth callback,
• do not use a preview URL as the final payment webhook target,
• use previews for layout and copy review, not as permanent integration endpoints.

After deployment, continue to Testing and deployment and Testing recipes for fuller post-launch verification.