Migrating an Existing React App (SP...

Why Migrate to Next.js?

SEO Benefits: Next.js supports SSR and SSG, allowing search engines to index pages more effectively.

Improved Performance: By leveraging SSR and code-splitting, Next.js ensures faster initial page loads and improved performance metrics.

File-based Routing: Simplifies routing with a filesystem-based approach, reducing boilerplate code.

Built-in API Routes: Offers backend functionality within the same project, removing the need for an external API server.

Automatic Code Splitting: Ensures only the necessary JavaScript is loaded for a given page.

Step-by-Step Guide

Step 1: Install Next.js as dependency

The first thing you need to do is to install next as a dependency:

For our example we will use below next version which will follow Page Router of NextJs

npm install next@12.0.7

Step 2: Create the next.config.js

Create a next.config.js at the root of your project. This file will hold your Next.js configuration options.

module.exports = {
    reactStrictMode: true,
    output: 'export',
}

Step 3: Create the Root Folder Sturcture and Set Entrypoint

In '/src' folder create a folder named 'pages' and put all the page components with Name like 'AboutUs.js to 'about-us.js' inside that folder

In '/src' folder create a folder named 'styles' and create file 'global.css' put your index.css and app.css in created css file.

create a _app.js file and add your content of App.js in this like,

import '../styles/globals.css'
import { Footer } from '../components/Footer';
import { Navbar } from '../components/Navbar';

function App({Component, pageProps})
{
    return(
    <>
        <Navbar />
        <Component {...pageProps}/> 
        <Footer/>
    </>
    )
}

export default App

Here <Component {...pageProps}/> is must required. This will handle your components like we use router in react app.

Step 4: Metadata Handling

If you are using react-hemlet or any other components in react to handle meta-tags. We don't need any of that in NextJs we can directly put it in out pages like

import React from 'react';
import { HelmetProvider, Helmet } from 'react-helmet-async';

export default function Aboutus() {
    return (
        <>
            <HelmetProvider>
                <Helmet>
                    <title>Lurantech | About Us | Turning Ideas into Digital Reality</title>
                    <meta name="robots" content="index, follow" />
                    <meta name="description" content="Description" />
                    ...
                </Helmet>
            </HelmetProvider> 
        </>
    );
};

Uninstall react-helmet and than above code will be replaced by,

import React from 'react';
import Head from 'next/head'

export default function Aboutus() {
    return (
        <>
            <Head>
                <title>Lurantech | About Us | Turning Ideas into Digital Reality</title>
                <meta name="robots" content="index, follow" />
                <meta name="description" content="Description" />
                ...
            </Head>
        </>
    );
};

Step 5: Update Scripts in package.json

Uninstall the react-scripts from module and in package.json replace the scripts by,

"scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

Step 6: Migrate the Environment Variables

The main difference is the prefix used to expose environment variables on the client-side. Change all environment variables with the REACT_APP_ prefix to NEXT_PUBLIC_.

REACT_APP_SERVICE_ID='...'
REACT_APP_TEMPLATE_ID='...'
REACT_APP_PUBLIC_KEY='...'
REACT_APP_SERVER='...'

This should be define like,

NEXT_PUBLIC_SERVICE_ID='...'
NEXT_PUBLIC_TEMPLATE_ID='...'
NEXT_PUBLIC_PUBLIC_KEY='...'
NEXT_PUBLIC_SERVER='...'

Step 7: Update Static Image Imports

If you were using images like,

import logo from '/logo.png'
...
// Before
<img src={logo} />

instead of using images by importing use public images as

<img src="public/images/logo.png" />

Step 8: Clean Up

You can now clean up your codebase from Create React App related artifacts:

Delete files:

public/index.html
index.js
App.js
App.css
App.text.js
index.css
reportWebVitals.js
setupTests.js

Migrating an Existing React App (SPA) to Next.js: A Step-by-Step Guide