Skip to content

Deploy using Vercel

Understanding Vercel

Vercel is a cloud platform specifically designed for frontend frameworks like Next.js (in fact, Vercel is the company that develops Next.js). It offers:

  • Simple, seamless deployment for Next.js projects
  • Automatic HTTPS for secure connections
  • Global CDN (Content Delivery Network) for fast loading times worldwide
  • Preview deployments for each Git commit
  • Free tier that's perfect for personal projects

Prerequisites

Before we deploy, make sure:

  1. Your project is working correctly in your local development environment
  2. You've committed your latest changes to Git
  3. You have a GitHub account
  4. You have a Vercel account

Creating a Vercel Account

If you don't have a Vercel account yet:

  1. Go to vercel.com
  2. Click "Sign Up"
  3. Choose "Continue with GitHub" (this makes deployment easier)
  4. Follow the authentication process
  5. Complete any required profile information

Deploying to Vercel

Let's walk through the process of deploying your portfolio using Vercel's web interface:

  1. Log in to your Vercel account at vercel.com/dashboard
  2. Click the "Add New..." button and select "Project"
  3. In the "Import Git Repository" section, you'll see a list of your GitHub repositories. Find and select your portfolio repository from the list.
  4. If you don't see your repository, click "Adjust GitHub App Permissions" and grant Vercel access to the repository
  5. Vercel will automatically detect that it's a Next.js project and pre-configure most settings for you
  6. Click the "Deploy" button at the bottom of the screen
  7. Vercel will now show a deployment screen with a progress indicator that takes you through these stages:
  8. Building: Installing dependencies and building your project
  9. Completing: Finalizing the deployment
  10. Ready: Your site is live!
  11. Once deployment is complete, you'll see a success message with a preview of your site and its URL (typically your-project-name.vercel.app)
  12. Click "Continue to Dashboard" to see more details about your deployment

Understanding the Deployment Process

When you deploy to Vercel, several important processes happen:

  1. Building: Vercel runs next build to create an optimized production version of your site
  2. Static Generation: Next.js pre-renders pages where possible for better performance
  3. Edge Network Deployment: Your site is deployed to Vercel's global CDN with copies in multiple regions
  4. DNS Setup: Vercel assigns a domain (yoursitename.vercel.app) to your project

Managing Your Deployed Site

After deployment, you can manage your site through the Vercel dashboard:

  1. Project Overview: Shows deployment status, domains, and recent activity

    • Check the "Domains" section to find your site's URL
    • View deployment details including build logs

  2. Deployments Tab: Lists all deployments of your project

    • Each Git commit creates a new deployment
    • You can view deployment details, logs, or roll back to previous versions

  3. Settings Tab: Customize your project settings

    • General: Change project name, build settings, etc
    • Domains: Add custom domains
    • Environment Variables: Add secrets or configuration values
    • Git: Manage repository connections and branch deployments

  4. Monitoring: View basic analytics about your site's performance

Automatic Deployments

One of the best features of Vercel is automatic deployments:

  1. Every time you push new commits to your GitHub repository, Vercel automatically deploys the updates
  2. For pull requests, Vercel creates "Preview Deployments" so you can test changes before merging
  3. This creates a seamless workflow where you can focus on development while Vercel handles deployment

To see this in action:

  1. Make a change to your project locally
  2. Commit the change to Git and push to GitHub
  3. Visit your Vercel dashboard - you'll see a new deployment being created automatically
  4. Once complete, your live site will be updated with the changes

Testing Your Deployed Site

After deployment, thoroughly test your site:

  1. Visit the provided Vercel URL
  2. Click through all navigation links to ensure each page loads correctly
  3. Test all interactive elements like buttons and animations
  4. View your site on different devices (mobile, tablet, desktop) to verify responsive design
  5. Verify that all images and assets load correctly
  6. Check that project links work as expected

Troubleshooting Common Issues

If you encounter problems with your deployment:

  1. Build Errors:

    • In your project dashboard, click on the failed deployment
    • Go to the "Build Logs" tab to see detailed error messages
    • Most issues are related to dependencies or syntax errors

  2. Missing Assets:

    • Make sure all image paths use the correct format for Next.js
    • Verify that files are in the right directories, especially in the public folder