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

Last Updated on March 4, 2024 by Digamber in React JS

Next, js is a dynamic web development framework that allows creating Rect server-side rendering static web applications.

Being a React developer, you don’t know what new challenge can come across to you.

In this quick yet informative guide, we will disclose: how to create a React Next.js project and install and set up Next js in React js application.

Not only but also, we will share not just one but two ways to build React Next js application.

Thanks to Vercel for creating such a fantastic front-end framework.

Next.js is a widely open-source framework used by the largest and most popular companies worldwide.

TikTok, Binance, Hulu, Hashnode, Deliveroo, Twitch — You can know about Next.js’s popularity by seeing how top OTT platforms and social media giants are adding Next.js to their tech stack.

This tutorial will share handy information about how to create a basic React Next.js app from scratch.

Here are the benefits of React Next app that make it most useful for developers:

• Fully extendable
• Automatic code splitting for faster page loads
• Client-side routing with optimized prefetching
• Development environment with Fast Refresh support
• API routes to build API endpoints with Serverless Functions
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• An intuitive page-based routing system (with support for dynamic routes)
• Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

Requirements

Whether, you have Windows, MacOs, or Linux.

Make sure to have Node 12.22 or greater set up in your system.

I am going to reveal two simple yet straightforward methods through which you can build a React Next.js app.

Create React Next App using Next

We will start with creating a directory, you can use the given command. It will create react-next-project folder on your system.

mkdir react-next-project

You can use the given command to get inside the app directory.

cd react-next-project

In the next step, you have to invoke the following command. It will generate a package.json file.

npm init -y

Now, we need to install react and react DOM libraries.

npm install next react react-dom --legacy-peer-deps

Head over to package.json file, register the given script as suggested below within the script property.

{
  "name": "react-next-project",
  "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"
  }
}

Create React Next App with Command

This method is quite simple; all you have to do just use the provided commands.

For that you have to type the command on the console screen and then hit enter.

npx create-next-app react-next-project

# or

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

You can use the command to directly go into the project folder

cd react-next-project

Here are the commands which will compile the React next application:

npm start => Start app in production mode
npm run dev => Start project with hot-reloading
npm run build => It simply compiles our Next applicaiton

For the time being we can execute the given command.

npm run dev

Here is the url that serves your React Next app.

http://localhost:3000