Migrating from Gatsby to Next.js (Pages Router)

---

title: 'Migrating from Gatsby to Next.js (Pages Router)' description: 'My journey migrating from Gatsby to Next.js' date: '2024-07-15' section: blog cover_image: 'https://res.cloudinary.com/crbaucom/image/upload/v1733973075/crbaucom-images/migrating-from-gatsby-to-nextjs-cover-image.png' tags: ['nextjs', 'gatsby', 'typescript', 'react']

I recently migrated my personal site from Gatsby to Next.js. Here's my actual experience, including the challenges I faced and how I solved them.

The Starting Point

My Gatsby site was:

• Using markdown for blog posts
• Styled with styled-components
• Using JavaScript
• Hosted on Netlify

Why I Migrated

While Gatsby served me well for years, several factors influenced my decision to migrate:

The Uncertain Future of Gatsby

In early 2023, Netlify acquired Gatsby, primarily for its Valhalla content mesh technology. Shortly after, they:

• Laid off most of the Gatsby core team
• Announced the shutdown of Gatsby Cloud (December 2023)
• Significantly reduced contributions to the open-source framework

While Netlify stated they would maintain Gatsby, the framework's future became uncertain. The once-vibrant ecosystem showed signs of stagnation:

• Plugin maintainers began abandoning their projects
• The official Discord became overrun with spam
• Issue queues grew with minimal response from maintainers
• Documentation remained outdated, still referencing the defunct Gatsby Cloud

Technical Reasons

Beyond the ecosystem concerns, I wanted to:

1. Take advantage of Next.js's growing ecosystem and features
2. Migrate to TypeScript
3. Revamp the design
4. Use a framework with active community development

The Migration Process

1. Project Setup

First, I created a new Next.js project with TypeScript:

npx create-next-app@latest --typescript --eslint

I then added key dependencies:

yarn add gray-matter mdx-bundler reading-time rehype-autolink-headings rehype-slug remark-gfm

2. Content Migration

The content migration was straightforward since I was already using markdown files. All I did was convert them to .mdx for enhanced functionality.

3. Fetching Data

I used @next/mdx to fetch the content from the content directory.

4. Styling

I'm still using styled-components for styling.

5. Hosting

I'm hosting the site on Netlify. I was on Gatsby Cloud, but since they have shut that down, I'm back to Netlify.

The Result

• Simpler codebase without GraphQL complexity
• TypeScript's type safety
• Active ecosystem with regular updates

Lessons Learned

1. Start with a clean Next.js project rather than trying to migrate in-place
2. Don't try to replicate Gatsby's features exactly - embrace Next.js's patterns
3. RTFM (Read the F***ing Manual) 🤪