How to Migrate Your Next.js Site from GitHub Pages to Vercel

🚀 How to Migrate Your Next.js Site from GitHub Pages to Vercel

While GitHub Pages is a fantastic free option for purely static sites, Vercel is the platform built by the creators of Next.js. Migrating to Vercel unlocks the full power of the framework, allowing you to go beyond static content and add dynamic features with ease.

This guide will show you how to migrate your existing Next.js project from GitHub Pages to Vercel in just a few simple steps.

🤔 Why Migrate to Vercel?

  • Dynamic Features: Use server-side features like API Routes (for contact forms, view counters, etc.) and Server Components.
  • Automatic Image Optimization: Vercel's <Image> component works out-of-the-box, optimizing your images for faster load times.
  • Seamless Integration: Zero-configuration deployments designed specifically for Next.js.
  • Analytics: Get performance and audience metrics with Vercel Analytics.
  • Private Repositories: Deploy from private GitHub repos for free.

🛠️ Step 1: Clean Up Your Next.js Configuration

GitHub Pages required us to configure our project for a static-only export. Vercel is much smarter and doesn't need these settings.

  1. Open your next.config.mjs file.
  2. Remove the output: 'export' line.
  3. If you had a basePath set for your GitHub repository, remove that too.
  4. If you had images: { unoptimized: true }, you can now remove it or set it to false to enable Vercel's image optimization.

Before (for GitHub Pages):

After (for Vercel):

🧑‍💻 Step 2: Sign Up for Vercel

If you don't have an account yet, now is the time.

  1. Go to vercel.com.
  2. Click Sign Up and choose Continue with GitHub.
  3. Authorize Vercel to access your GitHub account.

The Hobby plan is free and does not require a credit card.

🚢 Step 3: Import and Deploy Your Project

This is where the magic happens.

  1. From your Vercel dashboard, click Add New... → Project.
  2. Vercel will show a list of your GitHub repositories. Find your blog's repository and click Import.
  3. Vercel will automatically detect that it's a Next.js project and pre-fill all the build settings. You don't need to change anything.
  4. Click Deploy.

Vercel will now clone your repository, build the project, and deploy it. In a couple of minutes, your site will be live on a Vercel URL (e.g., your-project-name.vercel.app).

🔒 Step 4: (Optional) Make Your Repository Private

One of the great benefits of Vercel is its ability to deploy from private repositories for free. Since you no longer rely on GitHub Pages (which requires a public repo for free accounts), you can now make your code private.

  1. Go to your repository on GitHub.
  2. Navigate to Settings.
  3. In the "Danger Zone", find Change repository visibility and set it to Private.

Your Vercel deployments will continue to work seamlessly.

🌐 Step 5: Connect Your Custom Domain

To use your personal domain (e.g., yourblog.com):

  1. In your project's dashboard on Vercel, go to the Settings tab and then Domains.
  2. Enter your custom domain and click Add.
  3. Vercel will provide you with the DNS records you need to add to your domain registrar (like GoDaddy, Namecheap, etc.). This is usually an A record or a CNAME record.
  4. Once you've updated the DNS records, Vercel will automatically verify the domain and issue a free SSL certificate.

🎉 Conclusion

That's it! You've successfully migrated your blog to a more powerful and flexible platform. You now have the foundation to add dynamic features, improve performance, and scale your project effortlessly, all while maintaining a simple git push workflow.

Happy coding! 👋