Skip to main content

How to use React with Next.js

In this article, I will show you how to create a React app using Next.js.

Next.js is an alternative tool for creating React apps now that create-react-app (CRA) is no longer being maintained.

If you are interested in using Vite instead, see this article:

[How to use React with Vite (CRA Alternative)(how-to-use-react-vite-cra-alternative/)


These instructions were written and tested on a Mac.


To follow the steps in the article you should have the latest versions of NodeJS and npm installed.

Step 1. Create a project folder

Open up a terminal window and do the following:

mkdir -p ~/projects/nextjs
cd ~/projects/nextjs

Step 2. Create a project

Now run this command to create a new React app using Next.js:

npx create-next-app@latest

You will be prompted for a project name. This will also be used to create the folder for the project.  Respond to the prompts with the following:

  • Project name: nextjs-101
  • For the remainder of the prompts, use the defaults

Don't worry if you don't know some of the tech - this is just a demo

Step 3. Run the project

Now that you've created the project, change to the directory and run it:

cd nextjs-101
npm run dev

The response should contain a line like this:

- ready started server on, url: http://localhost:3000

Copy and paste the URL into the browser address bar.

For example:


Step 4. Run on a different port

There are a few ways to run on a different port.

The first way is to pass the port to the npm command:

npm run dev -- -p 3001

If you look at the output, you will see that it is actually doing this:

next dev -p 3001

But you can't run that command directly with the default installation.

What you can do, however, is add a script command to package.json if you plan to use that port a lot.

For example, add a script command called myport to package.json in the scripts block and save it:

  "scripts": {
"myport": "next dev -p 3001",
"dev": "next dev",

Run the command like this:

npm run myport

You can change myport to whatever you'd like or just edit the dev command to use the port.


You can find a copy of the demo project here:


In this article, you learned how to:

  • Create a React app using Next.js
  • Pass in a flag to change the port
  • Add a script to use a different port