Skip to main content

​
Overview

The Sunflower Capital website is optimized for deployment on Vercel, the platform built by the creators of Next.js. Vercel provides automatic deployments, preview environments, and excellent performance out of the box.

​
Prerequisites

  • A GitHub account with the repository
  • A Vercel account (free tier works perfectly)
  • Node.js 20.x or higher installed locally

​
Deployment Steps

1

Connect to Vercel

  1. Go to vercel.com and sign in
  2. Click “Add New” → “Project”
  3. Import your GitHub repository
  4. Vercel will automatically detect it’s a Next.js project
2

Configure Project Settings

Vercel auto-detects the Next.js framework. Verify these settings:
Next.js
3

Set Environment Variables (Optional)

If you’re using Google Analytics, add your tracking ID:
KeyValueNotes
NEXT_PUBLIC_GA_IDG-XXXXXXXXXXGoogle Analytics 4 ID
The current implementation uses a hardcoded GA ID (G-SR59L3T5LT) in layout.tsx. Consider moving this to an environment variable for better configuration management.
4

Deploy

Click “Deploy” and Vercel will:
  • Install dependencies
  • Run the build command
  • Deploy to a production URL
  • Provide a unique deployment URL
Your site will be live at: https://your-project.vercel.app

​
Next.js Configuration

The project uses a minimal Next.js configuration:
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;
This default configuration works perfectly for most use cases. You can extend it as needed.

​
Build Scripts

The following npm scripts are available for deployment: 
npm run dev
# Starts dev server on http://localhost:3000

​
Automatic Deployments

Every push to your main branch triggers an automatic production deployment:
  • Vercel builds and deploys automatically
  • Updates your production domain
  • Runs build checks and optimizations
Every pull request gets a unique preview URL:
  • Independent deployment for each PR
  • Perfect for testing before merge
  • Automatic updates on new commits
  • Preview URL format: https://your-project-git-branch-name.vercel.app

​
Custom Domain Setup

1

Add Domain in Vercel

  1. Go to your project settings
  2. Navigate to “Domains”
  3. Click “Add” and enter your domain (e.g., sunflowercapital.co)
2

Configure DNS

Add the following DNS records at your domain registrar:
Type: A
Name: @
Value: 76.76.21.21
3

Verify Domain

Vercel will automatically verify your domain and issue SSL certificates. This typically takes a few minutes.

​
Performance Optimization

Vercel automatically provides:

Edge Network

Global CDN with 100+ edge locations

Image Optimization

Automatic image optimization and WebP conversion

Smart Caching

Intelligent caching at the edge

Analytics

Built-in Web Analytics (see Analytics Setup)

​
Troubleshooting

If your build fails:
  1. Check the build logs in Vercel dashboard
  2. Run npm run build locally to reproduce
  3. Verify all dependencies are in package.json
  4. Check for TypeScript errors with npm run lint
  • Client-side variables must start with NEXT_PUBLIC_
  • Redeploy after adding new environment variables
  • Check the “Environment Variables” tab in project settings
This shouldn’t happen with Next.js on Vercel, but if it does:
  • Verify you’re using Next.js App Router (not Pages Router)
  • Check that vercel.json doesn’t have conflicting rewrites

​
Production Checklist

  • All environment variables configured
  • Custom domain added and verified
  • SSL certificate issued (automatic)
  • Analytics tracking verified
  • OG images displaying correctly
  • Mobile responsiveness tested
  • Build completes without errors
  • Lighthouse score reviewed

​
Next Steps

Analytics Setup

Configure Vercel Analytics and Google Analytics

Vercel Documentation

Learn more about Vercel features

Build docs developers (and LLMs) love

Get started for freeTalk to us