Skip to main content
This guide covers deploying SkyCast IA to production using Vercel, the recommended platform for Next.js applications.

​
Why Vercel?

Vercel is the platform created by the Next.js team and offers:
  • Zero-config deployment for Next.js apps
  • Automatic HTTPS and SSL certificates
  • Edge network for global performance
  • Serverless functions for API routes
  • Environment variable management
  • Preview deployments for every Git push
SkyCast IA can also be deployed to other platforms like Railway, Netlify, or Docker, but Vercel provides the best Next.js experience.

​
Prerequisites

Before deploying, ensure you have:
  • A GitHub, GitLab, or Bitbucket account
  • Your code pushed to a Git repository
  • All API keys ready (see API Keys Setup)
  • A Vercel account (sign up at vercel.com)

​
Deployment Steps

​
1. Push Code to Git Repository

Ensure your code is committed and pushed to GitHub, GitLab, or Bitbucket: 
git add .
git commit -m "Prepare for deployment"
git push origin main
Never commit your .env.local file! Verify it’s in .gitignore before pushing.

​
2. Import Project to Vercel

  1. Visit vercel.com/new
  2. Click Import Git Repository
  3. Select your repository from the list
  4. Click Import

​
3. Configure Project Settings

​
Framework Preset
string
default:"Next.js"
Vercel should auto-detect Next.js. If not, select it manually.
​
Root Directory
string
default:"./"
Leave as default unless your Next.js app is in a subdirectory.
​
Build Command
string
default:"next build"
Default command is fine. Override only if you have custom build scripts.
​
Output Directory
string
default:".next"
Next.js default output directory.

​
4. Add Environment Variables

In the Vercel project settings:
  1. Scroll to Environment Variables
  2. Add each variable from your .env.local file
  3. Set the environment to Production (and optionally Preview/Development)
Required variables: 
# OpenWeatherMap API
NEXT_PUBLIC_OPENWEATHER_API_KEY=your_production_key

# Groq AI API
GROQ_API_KEY=your_production_key

# Google reCAPTCHA
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_production_site_key
RECAPTCHA_SECRET_KEY=your_production_secret_key

# GNews API
NEWS_API_KEY=your_production_key
Use production-specific API keys, not your development keys. This improves security and helps track usage separately.

​
5. Deploy

  1. Click Deploy
  2. Vercel will build and deploy your application
  3. Wait 1-3 minutes for the deployment to complete
  4. You’ll receive a production URL (e.g., skycast-ia.vercel.app)

​
Post-Deployment Configuration

​
Update reCAPTCHA Domains

  1. Visit Google reCAPTCHA Admin
  2. Select your site
  3. Click Settings
  4. Add your Vercel domain to Domains:
    • your-project.vercel.app
    • Any custom domains you’ve configured

​
Verify Deployment

Test your production deployment:
  • Visit your Vercel URL
  • Check that weather data loads
  • Test city search
  • Verify AI analysis appears
  • Open the chat and complete reCAPTCHA
  • Send a chat message
  • Check that news articles load

​
Build Configuration

​
next.config.ts

SkyCast IA’s build configuration (next.config.ts:1): 
const nextConfig = {
  // Server Actions configuration
  experimental: {
    serverActions: {
      allowedOrigins: ["192.168.2.175:3000", "localhost:3000"],
    },
  },

  // Allow builds with ESLint warnings
  eslint: {
    ignoreDuringBuilds: true,
  },

  // Allow builds with TypeScript errors
  typescript: {
    ignoreBuildErrors: true,
  },

  // Optimize OpenWeatherMap images
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "openweathermap.org",
        port: "",
        pathname: "/img/wn/**",
      },
    ],
  },
};
Production Recommendation: Remove ignoreDuringBuilds and ignoreBuildErrors for production. These settings are useful during development but may hide critical issues.

​
Update Allowed Origins for Production

Add your production domain to allowedOrigins: 
experimental: {
  serverActions: {
    allowedOrigins: [
      "localhost:3000",
      "your-project.vercel.app",
      "your-custom-domain.com"
    ],
  },
}

​
Performance Optimization

​
Edge Functions

Vercel automatically deploys Next.js API routes as serverless functions. For better global performance, consider converting critical routes to Edge Runtime: 
// src/app/api/chat/route.ts
export const runtime = 'edge'; // Add this line

export async function POST(req: Request) {
  // ... existing code
}
Best for:
  • Lightweight API routes
  • Real-time data fetching
  • Geolocation-based logic
  • Authentication checks
Avoid for:
  • Heavy computations
  • Large dependencies
  • File system operations

​
Caching Strategy

Implement caching for weather data to reduce API calls: 
// Example: Cache weather data for 10 minutes
export async function GET(request: Request) {
  const response = await fetch('https://api.openweathermap.org/...');
  const data = await response.json();
  
  return NextResponse.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=600, stale-while-revalidate=300',
    },
  });
}
​
s-maxage
number
default:"600"
Cache duration in seconds (10 minutes recommended for weather data)
​
stale-while-revalidate
number
default:"300"
Serve stale content while revalidating in background (5 minutes)

​
Custom Domain Setup

​
Add Custom Domain

  1. Go to your Vercel project Settings
  2. Navigate to Domains
  3. Enter your custom domain (e.g., skycast.com)
  4. Follow DNS configuration instructions

​
Update DNS Records

Add these records to your DNS provider: For root domain (skycast.com): 
Type: A
Name: @
Value: 76.76.21.21
For subdomain (www.skycast.com): 
Type: CNAME
Name: www
Value: cname.vercel-dns.com
DNS propagation can take up to 48 hours, but usually completes within a few minutes.

​
Environment-Specific Configuration

​
Development vs Production

Use different environment variables for each environment: 
# Development (.env.local)
NEXT_PUBLIC_OPENWEATHER_API_KEY=dev_key_here
GROQ_API_KEY=dev_key_here

# Production (Vercel Dashboard)
NEXT_PUBLIC_OPENWEATHER_API_KEY=prod_key_here
GROQ_API_KEY=prod_key_here

​
Preview Deployments

Vercel creates a preview deployment for every Git push:
  • Production: Deployed from main or master branch
  • Preview: Deployed from feature branches
  • Development: Local environment only
Configure different variables for each:
  1. Vercel Dashboard → Settings → Environment Variables
  2. Select target environments: Production, Preview, or Development

​
Monitoring & Analytics

​
Vercel Analytics

Enable Vercel Analytics for performance insights:
  1. Install the package: 
    npm install @vercel/analytics
  2. Add to src/app/layout.tsx: 
    import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

​
Error Tracking

Monitor errors in Vercel Dashboard:
  • Navigate to Logs to view runtime errors
  • Check Functions for API route performance
  • Review Build Logs for deployment issues

​
Troubleshooting

Cause: ignoreBuildErrors is disabled and there are type errorsSolutions:
  • Fix TypeScript errors in your code
  • Temporarily enable ignoreBuildErrors in next.config.ts
  • Check build logs for specific error messages
Cause: Variables not set in Vercel or incorrect namingSolutions:
  • Verify all variables are added in Vercel Dashboard
  • Check for typos in variable names
  • Ensure NEXT_PUBLIC_ prefix for client-side variables
  • Redeploy after adding new variables
Cause: Production domain not whitelistedSolutions:
  • Add Vercel domain to reCAPTCHA admin console
  • Wait a few minutes for changes to propagate
  • Clear browser cache and test again
Cause: High traffic hitting API limitsSolutions:
  • Implement caching (see Performance Optimization)
  • Upgrade to paid API plans
  • Monitor usage in provider dashboards
  • Implement request throttling
Cause: Cold starts on serverless functionsSolutions:
  • Consider using Edge Runtime for critical routes
  • Implement caching strategies
  • Optimize API call frequency
  • Use Vercel Pro for faster cold starts

​
Continuous Deployment

Vercel automatically deploys when you push to Git: 
# Make changes
git add .
git commit -m "Update weather chart colors"
git push origin main

# Vercel automatically:
# 1. Detects the push
# 2. Builds the application
# 3. Runs checks
# 4. Deploys to production
# 5. Sends deployment notification

​
Deployment Protection

Enable deployment protection for production:
  1. Vercel Dashboard → Settings → Deployment Protection
  2. Enable Vercel Authentication
  3. Add team members who can bypass protection

​
Rollback Strategy

If a deployment introduces issues:
  1. Go to Vercel Dashboard → Deployments
  2. Find the last working deployment
  3. Click the ⋯ menu
  4. Select Promote to Production
Rolling back is instant and doesn’t require a new build.

​
Next Steps

Environment Variables

Review the complete environment variables reference.

API Keys Setup

Learn how to obtain and configure all required API keys.

Vercel Documentation

Explore advanced Vercel features and configuration options.

Build docs developers (and LLMs) love

Get started for freeTalk to us