How to Create a Next.js App Using App Router (Beginner Guide)

Introduction

Next.js is a React framework that enables server-side rendering (SSR), static site generation (SSG), and modern routing out of the box. It is widely used for building fast, SEO-friendly web applications.

Step 1 — Verify Node.js Installation

Make sure Node.js and NPM are installed on your system:

node -v
npm -v

Step 2 — Create a New Next.js App

npx create-next-app@latest my-next-app

Step 3 — Navigate to Project Directory

cd my-next-app

Step 4 — Start Development Server

npm run dev

Step 5 — Understand App Router Structure

app/
 ├── page.tsx
 ├── layout.tsx
 ├── globals.css

Step 6 — Create a New Page

Create a folder inside app:

mkdir app/about

Create page.tsx inside it:

export default function AboutPage() {
  return <h1>About Page</h1>;
}

Step 7 — Build for Production

npm run build

Step 8 — Start Production Server

npm start

Useful NVM Commands

| Command | Description | |-------|--------------------------| | npm run dev | Start development server | | npm run build | Build for production | | npm start | Run production server | | npx create-next-app | Create new app |

Troubleshooting

If port 3000 is busy:

PORT=3001 npm run dev

Conclusion

Next.js simplifies React development by providing routing, SEO optimization, and performance improvements out of the box.

Author

Marquefactory DevOps Team