Why And How To Migrate A React Application to Next.js

Next.js is an amazing tool for creating web applications. Inspired by PHP, it benefits from JavaScript modules and allows to export the components of applications. This means we are able to perform individual tests for each component as well as to download thousands of components or modules from npm.

Do you want to migrate your React application to Next.js? This article will tell you how and why to do so.

What is Next.js?

Next.js is an open-source React framework created by Vercel, built with Google and Facebook. It is advertised as a zero-configuration, single-command toolchain for React apps.

Next.js is used by some of the most popular websites like Airbnb or Twilio and the most common use cases are e-commerce, news, marketing and travel.

The main features of Next.js framework are:

• Next.js provides an intuitive page-based routing system (with support for dynamic routes)
• it comes with a predefined build pipeline (Babel and Webpack)
• it performs code splitting automatically
• it handles server-side rendering (SSR) as well as static site generation (SSG)
• client-side routing is optimized with prefetching
• Next.js has built-in CSS and Sass support as well as support for any CSS-in-JS library
• it provides API routes for building API endpoints with Serverless Functions
• Next.js is fully extendable
• hot code reloading
• automatic routing

When talking about CSS, we need to mention a system called styled-jsx, which allows us to work with all the power of CSS directly in JS Files. For example, when we represent the components we only generate the CSS that is being used and, once is no longer used, it automatically removes the CSS. This means we will never have unnecessary CSS.

Advantages of Next.js - Why do we migrate our website to Next.js

Speaking from experience, there are a couple of reasons why we migrated our website to Next.js. They are:

• Server-side rendering (SSR)
  • allows to hydrate the React app state in the background giving a faster response and easier navigation for the users. Once HTML has been delivered to the client nothing else needs to happen for the user to be able to read the content. This improves page loading time. Additionally, we can throw cache in front of our server to improve performance.
• Static site generation (SSG)
  • processes JavaScript at build time and sends the client a smaller amount of data. Having a static site means having a faster website.
• SEO optimization
  • with Next.js enabling both SSG and SSR we greatly improved our SEO, making our website more indexable a possibility to write the API
• optimized bundling and code splitting
  • code-splitting ensures application’s performance is optimal. The code is split in lightweight bundles, so instead of loading all of JavaScript, our application only loads the bundle needed.
• community
  • support from the Next.js team in development problems, extensive documentation and examples
• growing popularity
  • Next.js is constantly growing which means it will be maintained for a long time

Next.js vs create-react-app : comparison

Create- react-app is an officially supported way to create single-page React applications. It is a way to leverage React to support client-side rendering (CSR). On the other hand, Next.js is a way to leverage React to support server-side rendering (SSR).

With Next.js you can choose if you want your route to be SSR or SSG. You are getting more out-of-the-box solutions than with create-react-app.

How to migrate to Next.js - Step by Step guide

Let’s talk about how to migrate your React application to Next.js

1. Create a Next app
   • setup your app using (https://nextjs.org/docs/getting-started) :
     1. create-next-app command (https://nextjs.org/docs/getting-started#setup) or
     2. manually install all dependencies and add necessary scripts to your package. json (https://nextjs.org/docs/getting-started#manual-setup)
2. Recreate your routes
   1. create your route structure using folders and file names inside pages directory (https://nextjs.org/docs/routing/introduction)
   2. you can use dynamic routes to catch all routes that do not have predefined slugs (https://nextjs.org/docs/routing/dynamic-routes)
3. Move your components to the new project
   1. the suggested way is to put them in components folder in the main directory
   2. be sure to not put any of them in pages directory as they would become routes
4. Plug in your styles
   1. import your main stylesheet in [_app.js file](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
   2. since version 9.3 of Next.js there is also built-in support for SASS/SCSS, for earlier versions you can use @zeit/next-sass npm package
5. Take advantage of static/SSR pages
   1. to take full advantage of Next.js features you should try to move all of your data fetchings to one of the functions: getStaticProps, getServerSideProps
   2. getStaticProps should be used on those routes that you want to be rendered at build time and served as static. If you want to use it on a dynamic route you should also use getStaticPaths
   3. getServerSideProps is to be used on those routes that you want to generate on the server

Pain points:

1. Libraries that need access to the window
   1. because the app is always rendered on a server (either SSR or at build time - when SSG) there is no access to the window object
   2. some libraries depend on this object to work correctly
   3. workaround: conditionally load the library after the component was mounted (use useEffect or componentDidMount)
2. Adjusting all your and Router occurrences to Next.js API - depending on the size of your project (and number of times you use either of this elements) you could spend a lot of time tweaking them to fit the Next.js API (it is slightly different than React one)

Summary

Next.js is an excellent framework for React developers for building static or server-side rendered sites. The popularity of React helped boost Next as well.

The framework helps to boost SEO, website speed while providing code splitting and API routing and this is why we decided to migrate from React to Next.js.