Migrating To NextJS From React

Want to switch to next without starting everything from scratch?

I gotcha!

Why switch?

  1. Next takes care of routing for you.
  2. Faster Rendering.
  3. Supports typescript, tailwind , APIs .
  4. Has SEO (Search Engine Optimization)
  5. Has Image Optimization.

Converting Process

Step-1

Delete React Dependencies like “react-scripts” , “react-router”, “web-vitals” from package.json.

This can be done by uninstalling the package

npm uninstall <packagename>

Remove index.html from public as well. We won’t be needing that for nextjs.

(Optional) Step-2

remove all node_modules if you used create-react-app for your project.

Node_modules has tons of useless packages which we are not even going to use. Better delete than wasting space.

Step-3

Install npm package for Next

We removed react-scripts in first step. How do we run our project now?

Inside package.json change the commands to:

To run project do the following in terminal:

npm run dev

Step-4

Create “components” , “pages” and “public” folder in your project folder.

It should look like:

Make sure you move your media ( images, videos, SVGs) to public folder under “assets”. (When you put something inside public it is accessible to all components of next. Now instead of long source of file you just write /foldername/filename and you are good to go! )

Components

This Folder contains repeating components which we use in all pages. Like

  • Header (Navigation Bar)
  • Footer
  • Layout (Rather than making header and footer for every page we can define it in a layout and it will be displayed by default on all pages.

Layout.js looks like

Pages

This folder contains all the pages which we make. by default it displays index.js.

You can safely delete your old index.js’s content and paste landing page code there. (Why? Because in NextJS we don’t have to worry about defining the rendering like we do in React)

Next.js uses the _App component to initialize pages. You can override it and control the page initialization.

Your _App.js should look like :

You can put your old component folder files here and they will run without any changes. For example you created a login page for your website. You had to define it inside App.js in React right? In Next you can simply put it inside pages folder and it automatically creates its routing.

Public

Add your media requirements inside assets.

While putting their address you just have to define it with “/folder/filename” instead of whole path. This is built-in feature inside next. (Life saver for me)

For CSS you can either keep each style in seperate folder for define it globally inside “global.css”.

I personally use both tailwindcss and vanilla css so I use global.css to define any tag.

At last add .next to your .gitignore.

Congrats! You converted your Project to Next.js

For Official Reference you can visit https://nextjs.org/docs/migrating/from-create-react-app

If there is any mistake let me know in comments. Hope you had fun time reading. Cheers!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is JavaScript “this”?

Angular: Facades + RxJS!

AJAX Tutorial

How to Add Dynamic Styles in React and React Native

c# Snake in the browser

Browser running c# Wasm snake

First Missing Positive Number in an Array

How to Achieve Good Type Safety with Vue.js’ Option API and Vuex.

Count Prefixes of a Given String

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Vyas

Vaibhav Vyas

More from Medium

Unit testing in Next.js using jest and react testing library

Create a custom hook in NextJS to get pathname and add it to the body class.

How to build SPA with NextJS

How Easy it is to Start Setting up a Simple Blog with Next.js?