Table of Contents
In this article, we assume that you know the basics of Next.js.
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.
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 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 or Nuxt JS 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 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 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
pagesinroot - We move our
App.jstopages/index.js - We create a new file inside
pagesfor everyRoutethat 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
