How to Set Up Next.js in React with Create React App

This tutorial will help you learn how to install and create a React and Next JS project.

Next is a popular React-based JavaScript framework that helps create React server-side rendering web applications.

Next is a noble open-source framework developed by Zeit.

It’s a fantastic mechanism that allows you to build React next website. It comes with great features; in this post, we will show you how to quite easily install and set up Next js in React js app.

Next, js comes with excellent features that drastically reduce the frontend development process.

Scilicet, Next js is used by the most popular companies all over the globe, e.g., Uber, Netflix, Twitch, etc.

Prerequisite

In order to configure Next js project, you must have MacOs, Linux and Windows.

Node Js 12.22.0

There are two ways to create Next js project:

Automatic React Next Project

Head over to the terminal, open the console screen, type the command then hit enter to build or install a new application directory:

npx create-next-app react-next-demo

# or

npx create-next-app@latest react-next-demo

Immediately after app is created, move into the app folder:

cd react-next-demo

We will build the React next project; you can use either of the commands:

npm run dev => Runs current project instance with hot-reloading
npm run build => Compiles our project
npm start => Run app in production mode

We are using npm run dev command, hot-reloading considered in mind.

npm run dev

Your app will run on this URL:

http://localhost:3000

Build React Project with Next Library

First, you need to make an empty folder; name it react-next-demo.

mkdir react-next-demo

Enter into the project folder.

cd react-next-demo

Run npm initializer command with -y attribute.

npm init -y

In the subsequent step, type and execute the given command:

npm install next react react-dom

Next, open the package.json file; in the scripts section, add the following scripts.

{
  "name": "react-next-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Conclusion

Next is a great framework. You can build dynamic pages and routes with the Next framework.

Not just that, It gives ultimate freedom through its built-in features and support for server-side rendering. We consider it the best option for full-stack React development.