Migrating React JS project to Next JS
Tags: agilewebandappdevelo
Published: 2022-07-04 14:47:51

---
title: Migrating React JS project to Next JS
published: true
date: 2022-07-04 08:57:59 UTC
tags: Agilewebandappdevelo
canonical_url: https://apiumhub.com/tech-blog-barcelona/migrating-react-js-project-to-next-js/
---

In this article, we assume that you know the basics of [Next.js](https://dev.to/apium_hub/next-js-framework-2e85).  
To understand what Next JS is, the benefits of SSR (Server Side Rendering), and a comparison with Gatsby and Express, you can read this article [Next.js](https://dev.to/apium_hub/next-js-framework-2e85).

## Why migrate to Next JS?

It is becoming increasingly common for businesses to have a website, although at the moment only 48% have one. Speaking of the half that have already gone digital, if you want to increase your presence on the Internet, it is essential that you have a good positioning in the main search engines, and, therefore, that you take care of the SEO of your page so that the [crawlers](https://developers.google.com/search/docs/advanced/crawling/overview-google-crawlers) detect it and make you climb positions when users search on the Internet.

This is why if you currently have a website built in React JS or Vue JS you will need to migrate to [Next JS](https://nextjs.org/) or [Nuxt JS](https://nuxtjs.org/) respectively in order to get the most organic visits. Another way to increase views would be paid SEO, either for products on your website, or related keywords in your industry.

Related to the benefits mentioned in the [article](https://dev.to/apium_hub/next-js-framework-2e85) mentioned above, migrating to Next JS brings us mainly the possibility of having a web page rendered on the server, and therefore, with the possibility of having SEO on our website.

After migrating to Next JS, we will have the possibility to choose our strategy to render our content. [Data fetching](https://nextjs.org/docs/basic-features/data-fetching/overview) allows us to render a page in SSR and another in CSR (Client), so we can keep everything we had in our old React app, but with the possibility of adding SSR when and where we want.

## First steps

In this article we are going to cover a migration of a create react app project that has not been `ejected`.

We update our `package.json` removing `react-router-dom and react-scripts` and adding `npm i next`

We add the next scripts:

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

## Assets

We will need the `public` directory but in react we will already have it with index.html and statics. Next.js uses it only for statics.

So we will have to move the index.html to the `root` of our project.

## Routing

For the routing system next does not use any third party libraries, like React Router in react.  
Next.js comes with its own routing system.

- We create the directory `pages` in `root`
- We move our `App.js` to `pages/index.js`
- We create a new file inside `pages` for every `Route` that we have.
- For dynamic paths (ej: `/blog/:id`), we can do this (ej: `/pages/blog/[id].js`). T

## Secure access to Web APIs

With client-side rendered applications, we can access window, localStorage, navigator.  
In the case of Next.js, when using pre-rendering, we will have to make sure that we have this access only when we are on the client side:

```
if (typeof window !== 'undefined') {
  // Aquí tenemos acceso a `window`
}
```

The recommended way to access is using the hook:

```
import { useEffect } from 'react'

useEffect(() => {
  // Aquí tenemos acceso a `window`
}, [])

```

## Optimizations

### Optimizing the images

From version 10.0.0 onwards, we can use the next/image component which is an extension of the HTML tag ““`.  
This component automatically optimizes and resizes images and serves them in the modern WebP format as long as the browser allows it.

Another important point is that Next.js does not optimize them in `build time` but it does it `on-demand` when the user requires it.  
Therefore, the `build time` will be the same with 10 or 10 million images.

```
import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>Apiumhub</h1>
      <Image
        src="/me.png"
        alt="Next.js for Apiumhub"
        width={500}
        height={500}
      />
      <p>Welcome to my blog!</p>
    </>
  )
}
```

### Optimizing for SEO

By react you are probably familiar with react-helmet to add meta tags and improve SEO.  
With next, we will use `next/head` to add meta tags to the `<head />` tag of your page.

```
// src/components/seo.js

import Head from 'next/head'

export default function SEO({ description, title, siteTitle }) {
  return (
    <Head>
      <title>{`${title} | ${siteTitle}`}</title>
      <meta name="description" content={description} />
      <meta property="twitter:title" content={title} />
      <meta property="twitter:description" content={description} />
    </Head>
  )
}
```

## Environment variables

The only difference for environment variables with Create React App is the prefix for exposing them on the client side.

Change all variables from: `REACT_APP_` to prefix `NEXT_PUBLIC_`.

## Single-Page App (SPA)

If you want to move your project to a SPA, you can move your index.html to a generic path named: `pages/[[[...app]]].js.`.

```
// pages/[[...app]].js

import { useState, useEffect } from 'react'
import CreateReactAppEntryPoint from '../components/app'

function App() {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) {
    return null
  }

  return <CreateReactAppEntryPoint />
}

export default App
```