How Migrating from React to Next.js Improved My SEO

Introduction #

I recently created a web application packed with useful tools for developers, that tool is called Dev Quick Tools (you can check it out here). Initially, I built it using pure React, but I noticed some SEO limitations—especially with the OpenGraph protocol, which wasn’t functioning as expected for individual tools. To address this, I decided to migrate the application to Next.js to enhance its SEO capabilities. In this article, I’ll walk you through my experience with the migration process and the improvements it brought.

Why Did I Need to Migrate? #

When I first built the application in React, I focused on delivering a smooth and intuitive user experience. After deploying around 10 tools, however, I realized the app wasn’t fully meeting my SEO needs—particularly with the OpenGraph protocol. My goal was for each tool to have a unique OpenGraph image, title, and description when shared on social media, giving users a clear preview of each tool’s purpose.

In a typical React setup with client-side rendering, metadata like OpenGraph tags are not fully accessible to web crawlers. Since these tags are generated in JavaScript, they won’t load until the page is rendered in the browser, which makes it challenging for social media platforms to fetch the metadata correctly. To solve this, I decided to migrate to Next.js, which offers server-side rendering (SSR) and static site generation (SSG), enabling crawlers to access fully rendered metadata right from the server.

The Migration Process #

I started the migration by installing Next.js using the following command:

npm install next@latest

Then, I updated the package.json scripts to replace react-scripts with next:

"scripts": {
  ...
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
  ...
}

Since Next.js uses file-based routing, I reorganized the project structure to match its conventions. I moved each main page component (like Home and Tools) into a new pages directory, allowing each file to become an automatic route. Components used across multiple pages were moved into a components folder for better organization.

The original React app used react-router-dom, so I replaced it with Next.js’s built-in routing system. This step was straightforward since Next.js supports routing out of the box.

One crucial step was to add "use client" at the top of components that use React hooks, as these components can’t be server-side rendered. Next.js (v14.x) requires them to be explicitly marked as client-side only.

With Next.js, I was able to set up unique OpenGraph (OG) metadata for each tool page, a feature that was limited in Create React App due to its client-side rendering. Next.js supports server-side rendering (SSR) and static site generation (SSG), which means the metadata for each page is generated on the server and included in the initial HTML. This allows web crawlers and social media platforms to access the OpenGraph tags directly, ensuring each tool page has a unique OG image, title, and description when shared. This setup has greatly improved the visibility and presentation of individual tools on social media.

A Bonus: OpenGraph Tool #

As I worked through the migration and tested the OpenGraph tags, I realized I could build a tool to preview the metadata for the website without relying on external tools or sharing test links on social media. In a pure React setup, fetching metadata for an external URL would often face CORS (Cross-Origin Resource Sharing) limitations, making it difficult to retrieve OpenGraph tags directly from the client. However, Next.js provides the flexibility to create API routes directly within the application, which run on the server and bypass CORS restrictions. Leveraging this feature, I created an API endpoint to fetch OpenGraph metadata for any URL. This tool has proven incredibly useful, as it lets me preview and validate metadata for all the websites I’ve developed.

Wrapping It Up (With a Bow!) #

Migrating from Create React App to Next.js has transformed how my developer tools application performs on the web. Not only did it improve SEO, but it also enabled each tool page to have unique OpenGraph metadata, allowing for accurate previews on social media. With Next.js’s server-side rendering and API routes, I was able to overcome limitations like CORS and even create a custom metadata preview tool. The process highlighted the advantages of Next.js for applications that rely on both dynamic functionality and solid SEO. Overall, the migration has made my application more shareable, searchable, and user-friendly, making the transition well worth the effort!