Next.js has become one of the most powerful React frameworks, making it easier than ever to build high-performance web applications. Whether you’re a beginner or an experienced developer, this guide will walk you through building your first Next.js app step by step.

By the end of this tutorial, you’ll have a working Next.js project ready for deployment!

🔹 Why Choose Next.js?

Before we dive into the code, let’s see why Next.js is so popular:

✅ Server-side Rendering (SSR) – Improves SEO & performance
✅ Static Site Generation (SSG) – Faster page loads
✅ API Routes – Backend functionality without extra setup
✅ Automatic Code Splitting – Optimized bundle size
✅ Built-in Image Optimization – Faster loading images

With these benefits, Next.js is a game-changer for web development!

📌 Step 1: Install Next.js

To start a new Next.js project, open your terminal and run:

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? my-app

Would you like to use TypeScript? No / Yes

Would you like to use ESLint? No / Yes

Would you like to use Tailwind CSS? No / Yes

Would you like your code inside a src/ directory? No / Yes

Would you like to use App Router? (recommended) No / Yes

Would you like to use Turbopack for next dev? No / Yes

Would you like to customize the import alias (@/* by default)? No / Yes What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Run the development server

1. Run npm run dev to start the development server.

2. Visit http://localhost:3000 to view your application.

3. Edit theapp/page.tsx file and save it to see the updated result in your browser.

📌 Step 2:Project structure and organization

This page provides an overview of the folder and file conventions in Next.js, as well as tips for organizing your project.

Folder and file conventions

Top-level folders

Once installed, your project will have the following files:

Top-level folders are used to organize your application's code and static assets.

�� pages/ → Contains all your pages (e.g., index.js, about.js)
📂 public/ → Stores static assets like images
�� styles/ → Contains global & component-specific CSS by default tailwind is installed.you don’t need to install externally.
📜 next.config.js → Configuration settings.

Note: You must have to save your pages with page.tsx or jsx. if you are creating about page you must have to create a about file in that You have to create page.tsx or jsx file.

📌 Step 3: Create Your First Page

Edit the pages/index.js file to customize your homepage:

export default function Home() {
  return (
    <div>
      <h1>Welcome to My First Next.js App 🚀</h1>
      <p>This is a beginner-friendly tutorial.</p>
    </div>
  );
}

Save the file and check your browser. You just created your first Next.js page!

📌 Step 4: Add Navigation

To create multiple pages, add an About page (pages/about.js):

export default function About() {
  return (
    <div>
      <h1>About This App</h1>
      <p>Built with Next.js for fast performance!</p>
    </div>
  );
}

Now, update your index.js file to include navigation:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App 🚀</h1>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
    </div>
  );
}

Now, you can navigate between pages seamlessly! 🔄

📌 Step 5: Deploy Your App for Free

You can deploy your app on Vercel (the creators of Next.js) in one click:

1️⃣ Push your code to GitHub
2️⃣ Go to vercel.com
3️⃣ Click "New Project" → Select your repository
4️⃣ Click "Deploy" 🚀

Your app will be live on a free .vercel.app domain in seconds!

Congratulations:

Congratulations! 🎉 You’ve built and deployed your first Next.js app in just a few minutes.

Next.js makes modern web development faster, easier, and more powerful. Keep experimenting and explore features like API Routes, Image Optimization, and Middleware.

Do you have any questions about Next.js? Drop them in the comments! 💬🚀

🔹 Further Reading & Resources

📖 https://nextjs.org/docs/app/getting-started/installation
🎥 Next.js Crash Course (YouTube)
💡 Vercel Deployment Guide