🚀 How to Create a Next.js App: Step-by-Step Guide for Beginners

Next.js is a powerful React framework that enables server-side rendering, static site generation, and full-stack development—all in one. Whether you're building a personal portfolio, e-commerce store, or a blog, Next.js gives you the tools to get started fast.

In this blog, we’ll walk through how to create a Next.js app from scratch with all the essential steps and commands.

---

✅ Prerequisites

Before we start, make sure you have the following installed:

• Node.js (v16 or later) – Download Node.js

• npm or yarn – comes with Node.js

• A terminal/command prompt

---

🔧 Step-by-Step Guide to Create a Next.js App

---

Step 1: Open Your Terminal

Use your terminal (Command Prompt, PowerShell, VS Code terminal, etc.) to run the commands below.

---

Step 2: Create a New Next.js App

Use create-next-app, the official starter tool from Next.js.

Using npm:

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

Using yarn:

yarn create next-app my-next-app

Using pnpm:

pnpm create next-app my-next-app

Replace my-next-app with your desired project folder name.

You'll be asked some configuration questions (like TypeScript, Tailwind CSS, etc.). Choose according to your project needs.

---

Step 3: Go to Your Project Directory

cd my-next-app

---

Step 4: Start the Development Server

npm run dev

Or if you used yarn:

yarn dev

Or pnpm:

pnpm dev

This will start your Next.js app at:

http://localhost:3000

Open it in your browser to see your new Next.js app running! 🎉

---

🧪 Folder Structure Overview

When you open your project in a code editor like VS Code, you’ll see:

my-next-app/
├── pages/         # Contains page-based routing
├── public/        # Static assets (images, icons, etc.)
├── styles/        # CSS or Tailwind setup
├── node_modules/  # Installed dependencies
├── .gitignore     
├── package.json   # App metadata & scripts
├── next.config.js # Configuration file

---

📦 Useful Commands

---

🧰 Optional: Install Tailwind CSS (Recommended)

Run this in your project directory if you want Tailwind:

npx tailwindcss init -p

Then follow the Tailwind CSS docs to set it up: https://tailwindcss.com/docs/guides/nextjs

---

✅ Conclusion

That’s it! You’ve successfully created your first Next.js app. From here, you can start building components, fetch data, use API routes, and even deploy your app to platforms like Vercel, Netlify, or DigitalOcean.

If you're just starting with full-stack development or React, Next.js is a fantastic way to scale your skills.