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
Step 2. Create a project
Now run this command to create a new React app using Next.js:
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:
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.
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:
"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
- 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 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.
- 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.