Next.js How to setup a project

Next.js How to setup a project

What is Next.js

Next.js is the open source react framework which helps us to create static, dynamic and web applications. It’s used for server rendered applications, SEO website, PWA and many more.

Find more about the Next.js https://nextjs.org/

set up environment node --version

Create package.json and install dependencies : npm init -y

install next, react and react-dom in your project : npm install next react react-dom

Update scripts in package.json

"scripts": {

  "dev": "next",

  "build": "next build",

  "start": "next start"

}

dev next – Start Next.js project in development mode.

build next build – Build the application for production usage.

start next start – Start the Next.js production server.

Run project : npm run dev

nextjs/package.json

//nextjs/package.json
{
  "name": "nextjs",
  "version": "1.0.0",
  "description": "This is the first Next.js application",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "Cairocoders",
  "license": "ISC",
  "dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

nodejs/pages/index.js

//nodejs/pages/index.js
const Index = () => <h1>Welcome to the First Next.js Application</h1>
 
export default Index;