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/)

info

These instructions were written and tested on a Mac.

Prerequisites

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

tip

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 0.0.0.0:3000, url: http://localhost:3000

Copy and paste the URL into the browser address bar.

For example:

http://localhost:3000

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

tip

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

Example

You can find a copy of the demo project here:

• https://github.com/mitchallen/nextjs-101

Conclusion

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

References

• Next.js Documentation: https://nextjs.org/docs - The official documentation for Next.js provides in-depth information about the framework's features, configuration, and usage.
• Creating a Next.js App (Next.js GitHub): https://github.com/vercel/next.js#create-nextapp - This GitHub repository provides a simple guide to creating a new Next.js app using the "create-next-app" command.
• Next.js GitHub Repository: https://github.com/vercel/next.js - The Next.js GitHub repository contains the source code of the framework and is a valuable resource for more advanced users and contributors.
• Link Component (Next.js Documentation): https://nextjs.org/docs/api-reference/next/link - The Next.js documentation for the Link component, which is used for client-side navigation between pages in your Next.js app.
• Dynamic Imports (Next.js Documentation): https://nextjs.org/docs/advanced-features/dynamic-import - Learn about dynamic imports in Next.js, a powerful feature for code splitting and lazy loading.
• TypeScript Documentation: https://www.typescriptlang.org/docs/ - The official documentation for TypeScript. It provides comprehensive information about TypeScript's features, syntax, and how to use it with JavaScript projects
• TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html - The TypeScript handbook is a great resource for getting started with TypeScript and understanding its advanced concepts.
• TypeScript Playground: https://www.typescriptlang.org/play - An interactive online editor where you can write TypeScript code and see the compiled JavaScript output in real time. It's an excellent tool for learning and experimenting with TypeScript.
• ESLint Documentation: https://eslint.org/docs/user-guide/getting-started -The official documentation for ESLint, which provides detailed instructions on how to set up ESLint in your project and configure rules.
• TypeScript ESLint Documentation: https://github.com/typescript-eslint/typescript-eslint - The official GitHub repository for TypeScript ESLint. It contains information on how to set up ESLint to work with TypeScript and use TypeScript-specific ESLint rules.