How to Migrate from React.js to Next.js

Last updated: October 1, 2023

If you're considering enhancing your React.js application with server-side rendering, improved SEO, and a better developer experience, migrating to Next.js is a great choice. In this article, I'll guide you through the process of migrating a React.js app to Next.js, ensuring a smooth transition while leveraging the powerful features that Next.js offers.

Note: If you're looking to convert a Next.js application to React.js instead, check out my other article on how to convert Next.js to React.js.

Why Migrate to Next.js?

Next.js is a React framework that provides out-of-the-box support for server-side rendering (SSR), static site generation (SSG), and easy routing, among other features. Migrating to Next.js can offer:

• Improved Performance: Through SSR and SSG, your app can deliver content faster.
• Better SEO: Server-rendered pages are more SEO-friendly.
• Simplified Routing: File-based routing system simplifies navigation setup.
• Built-in CSS Support: Easily manage styles with CSS Modules and styled-jsx.

Steps to Migrate React.js to Next.js

Let's dive into the step-by-step guide on how to migrate a React.js application to Next.js.

1. Set Up a New Next.js Application

First, create a new Next.js project. You can use the Next.js CLI to set up the project quickly:

npx create-next-app@latest my-next-app
cd my-next-app

2. Copy Public Assets

If your React app has a public directory containing assets like images or fonts, copy all the contents into the public directory of your Next.js app.

3. Install Necessary Dependencies

Copy the dependencies and devDependencies from your React app's package.json to the Next.js app's package.json. Then run:

npm install

4. Migrate Components

Copy your src/components directory from your React app to the Next.js app. Since Next.js uses the pages directory for routing, we'll handle pages separately.

5. Migrate Pages and Adjust Routing

In your React app, you might have a src directory with pages managed by React Router. In Next.js, you'll use the pages directory for routing.

Create Pages: Move your page components to the pages directory. For example, your Home.js component would become pages/index.js.

Example:

// pages/index.js
import Header from '../components/Header'

function HomePage() {
  return (
    <>
      <Header />
      <h1>Welcome to My Next.js App</h1>
    </>
  )
}

export default HomePage

6. Update Routing Logic

Since Next.js uses file-based routing, you don't need React Router. Remove React Router dependencies:

npm uninstall react-router-dom

Adjust any routing logic in your components to use Next.js's Link component.

Example:

import Link from 'next/link'

function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}

export default Navigation

7. Handle Static Assets and CSS

CSS Files: Next.js supports global CSS files in pages/_app.js.

Example:

// pages/_app.js
import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...props} />
}

export default MyApp

CSS Modules: For component-level styling, you can use CSS Modules.

Example:

// components/Button.js
import styles from './Button.module.css'

function Button() {
  return <button className={styles.primary}>Click Me</button>
}

export default Button

8. Adjust Data Fetching Methods

Replace any data fetching in useEffect that should occur at build time or on the server with Next.js's data fetching methods.

• getStaticProps: For static generation.
• getServerSideProps: For server-side rendering.

Example using getStaticProps:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

function HomePage({ data }) {
  // Render your component using the fetched data
}

export default HomePage

9. Update Environment Variables

Next.js uses environment variables prefixed with NEXTPUBLIC for client-side variables.

Example:

NEXT_PUBLIC_API_URL=https://api.example.com

Access them in your code using process.env.NEXT_PUBLIC_API_URL.

10. Remove Unnecessary Packages

Since Next.js provides many features out of the box, you can remove packages that are no longer needed, such as:

• react-scripts
• react-router-dom
• Any custom SSR setup

11. Test Your Application

Run your Next.js application to ensure everything works as expected:

npm run dev

Navigate through your app to verify that pages load correctly, data is fetched properly, and styles are applied.

Conclusion

Migrating from React.js to Next.js can significantly enhance your application's performance and SEO capabilities. While the process involves several steps, Next.js's powerful features make it worth the effort.

By following this guide on how to migrate from React.js to Next.js, you should be able to transition smoothly. If you have any questions or encounter issues, feel free to reach out or leave a comment below.

Keywords: migrate reactjs to nextjs, migrate react to next.js, how to migrate react app to next.js

Thanks for reading! If you're interested in going the other way around, check out my article on how to convert a Next.js application to React.js. For more updates on new projects or articles, follow me on Twitter: @jake_prins.