How to Convert a Next.js Application to React.js

If you've built a web application using Next.js but now need to convert it to a pure React.js application, you're not alone. Whether it's for simplicity, specific project requirements, or a preference for client-side rendering, converting from Next.js to React can be straightforward with the right guidance. In this article, I'll walk you through the steps to convert a Next.js app to React.js, ensuring a smooth transition while maintaining your application's core functionality.

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

Why Convert Next.js to React.js?

Next.js is a fantastic framework that offers server-side rendering (SSR), static site generation (SSG), and a host of other features out of the box. However, these features might be overkill for smaller projects or unnecessary if you prefer client-side rendering (CSR) with React.js. Converting to React.js can simplify your build process, reduce server dependencies, and give you more control over your application's architecture.

Understanding the Differences

Before diving into the conversion process, it's essential to understand the key differences between Next.js and React.js:

• Server-Side Rendering vs. Client-Side Rendering: Next.js supports SSR and SSG, whereas React.js is primarily for CSR.
• Routing: Next.js has a built-in file-based routing system. In React.js, you'll need to use a library like React Router.
• API Routes: Next.js allows you to create API routes within the same project. In React.js, you'd typically separate the frontend and backend.

Steps to Convert Next.js to React.js

Let's get started with the step-by-step guide on how to convert a Next.js application to React.js.

1. Set Up a New React.js Application

First, create a new React.js project using a tool like Create React App (CRA) or Vite.

Using Create React App:

npx create-react-app my-react-app
cd my-react-app

Using Vite:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Transfer Dependencies

Copy the dependencies and devDependencies from your Next.js project's package.json to the new React.js project's package.json. Run npm install or yarn install to install them.

3. Migrate Components and Pages

Copy the contents of your Next.js components and pages directories into your React.js project's src directory. Since Next.js uses a pages directory for routing, you'll need to adjust this structure.

4. Implement Routing with React Router

Next.js handles routing automatically based on the pages directory. In React.js, you'll need to set up routing manually.

Install React Router:

npm install react-router-dom

Set Up Routes in src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Add other routes */}
      </Routes>
    </Router>
  )
}

export default App

5. Adjust Data Fetching Methods

In Next.js, data fetching is done using getServerSideProps, getStaticProps, or getInitialProps. In React.js, you'll need to handle data fetching within your components, typically using useEffect and useState.

Example:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return <div>{/* Render your data */}</div>
}

export default Home

6. Handle API Routes

If your Next.js app uses API routes within the pages/api directory, you'll need to migrate these to a separate backend service or adjust your frontend to fetch from external APIs.

Options:

• Create a Separate Backend: Use Node.js, Express, or any backend framework to set up API endpoints.
• Use External APIs: If possible, adjust your frontend to consume external APIs directly.

7. Update Environment Variables

Next.js uses environment variables prefixed with NEXT_PUBLIC_ for client-side variables. In React.js, create a .env file at the root of your project and prefix variables with REACT_APP_.

Example:

REACT_APP_API_URL=https://api.example.com

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

8. Remove Next.js Specific Configurations

Delete any Next.js specific configurations like next.config.js. Also, remove any Next.js-specific imports or packages that are no longer needed.

9. Test Your Application

Run your React.js application to ensure everything works as expected.

npm start

Go through each route and functionality to verify that the conversion was successful.

Conclusion

Converting a Next.js application to React.js involves setting up a new React project and migrating your components, adjusting routing, and handling data fetching differently. While Next.js offers many powerful features, a pure React.js application provides simplicity and flexibility, especially for projects that don't require server-side rendering.

By following this guide on how to convert Next.js to React.js, you should have a seamless transition.

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