Next.js - Why and How to Migrate Your React Application

Next.js is an amazing tool for creating web applications. Inspired by PHP, it benefits from JavaScript modules and allows exporting the components of applications. This means we can perform individual tests for each component and download thousands of components or modules from npm. But what exactly is Next.js?

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. The main features of Next.js framework are:

• Intuitive page-based routing system (with support for dynamic routes)
• Predefined build pipeline (Babel and Webpack)
• Automatic code splitting
• Server-side rendering (SSR) as well as static site generation (SSG)
• Client-side routing optimized with prefetching
• Built-in CSS and Sass support as well as support for any CSS-in-JS library
• API routes for building API endpoints with Serverless Functions
• 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 it is no longer used, it automatically removes the CSS. This means we will never have unnecessary CSS.

Advantages of Next.js - Why Migrate Your Website to Next.js There are several reasons why we migrated our website to Next.js. They include:

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 and giving us the possibility to write the API.

Optimized bundling and code splitting: Code-splitting ensures the application’s performance is optimal. The code is split into 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.

Here are the steps to migrate your React application to Next.js:

• Create a Next.js app using either the create-next-app command or manually install all dependencies and add necessary scripts to your package.json file.
• Recreate your routes using the folder and file naming structure inside the pages directory. You can use dynamic routes to catch all routes that do not have predefined slugs.
• Move your components to the new project, preferably in the components folder in the main directory.
• Import your main stylesheet in the _app.js file. You can also use built-in support for SASS/SCSS if your Next.js version is 9.3 or later.
• Take advantage of static/SSR pages by using the functions getStaticProps and getServerSideProps for data fetchings. Use getStaticProps for routes that you want to be rendered at build time and served as static. Use getServerSideProps for routes that you want to generate on the server.
• Handle libraries that need access to the window by conditionally loading the library after the component was mounted.
• Adjust all your and Router occurrences to Next.js API, which may take some time depending on the size of your project and the number of times you use either of these elements.