How to install Next.js

In this article, we’ll explain to you how to install and setup a Next JS project. Next.js is a React-based JavaScript framework for building server-side rendered React websites. It is an open-source framework created by Vercel. There are two ways to install and setup (Automatic Setup or Manual Setup) a next js project. You can also download the source code.

Next js and PHP MySQLi CRUD application

System Requirements

• Windows, Linux and MacOS are supported
• Node.js 12.22.0

Install Next.js (Automatic Setup)

Create a new project folder and paste the codes below.

npx create-next-app nextjs-blog
# or
npx create-next-app@latest nextjs-blog  

Enter that a new project directory called nextjs-blog. Let’s cd into it:.

cd nextjs-blog
npm run dev  

This dev command to start the development server on http://localhost:3000 to view your application.

• npm run dev - running a current project instance with hot-reloading
• npm run build - compiling your project
• npm start - starting your app in production mode

Creating a Next.js project Manually

Create an empty folder name nextjs-blog.

mkdir  nextjs-blog
cd nextjs-blog
npm init -y 

Now Install next, react and react-dom.

npm install next react react-dom  

{
  "name": "nextjs-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
 

Open package.json file, Now has the following content:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
} 

• npm run dev - running "next dev" to start Next.js
• npm run build - Runs "next build" to compiling the application for production usage
• npm start - starting your app in production server
• npm lint - built-in ESLint configuration

Next js and PHP MySQLi CRUD application