Next.js Tutorial (Beginner Friendly)

rukonpro profile

Rukon Uddin

11/14/2025

Next.js Tutorial (Beginner Friendly)

Next.js Tutorial (Beginner Friendly)


Welcome to the complete beginner-friendly Next.js Tutorial! This guide will help you learn Next.js step by step — from installation to building pages, APIs, and deploying your application.


🧩 What is Next.js?



Next.js is a React framework for building fast, scalable, SEO-friendly web applications. It includes features like:

  • File-based routing
  • Server-side rendering (SSR)
  • Static site generation (SSG)
  • API routes
  • Image optimization
  • Built-in CSS & file support


🛠️ Step 1 — Install Next.js


You can create a Next.js app using:


npx create-next-app@latest my-app
cd my-app
npm run dev


Now open your browser and go to:


http://localhost:3000


📁 Step 2 — Project Structure (Next.js 13+ App Router)


my-app/
 ├─ app/
 │   ├─ page.js          → Home page
 │   ├─ layout.js        → Layout file
 │   └─ api/             → API routes
 ├─ public/              → Static files
 ├─ package.json
 └─ next.config.js


📄 Step 3 — Create Your First Page


Inside app/page.js:


export default function Home() {
  return (
    <h1>Hello Next.js!</h1>
  );
}


This shows on the home route /.

🧭 Step 4 — Create Routes (Pages)

Create a folder inside app:


app/about/page.js


Add code:


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


Visit: http://localhost:3000/about


🎨 Step 5 — Add Global CSS


In app/globals.css, you can write:


body {
  margin: 0;
  font-family: sans-serif;
}

Then import it in layout.js:

import './globals.css';

⚙️ Step 6 — Layout Component

app/layout.js runs on every page.

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>My Navbar</nav>
        {children}
      </body>
    </html>
  );
}


🧵 Step 7 — Fetch Data (SSR / SSG)

Server-Side Rendered (default in app router)


export default async function Home() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <div>
      {posts.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}


🔌 Step 8 — Create API Routes


Next.js lets you create backend routes.

Create file:


app/api/hello/route.js
export function GET() {
  return Response.json({ message: "Hello from API" });
}


Access:


http://localhost:3000/api/hello


🖼️ Step 9 — Use Image Component


import Image from 'next/image';

export default function Photo() {
  return (
    <Image
      src="/myphoto.jpg"
      alt="Photo"
      width={400}
      height={300}
    />
  );
}


🚀 Step 10 — Deploy to Vercel


Deploy easily using:


npm run build
vercel

Or connect your GitHub repository to Vercel.


🎉 Summary


You learned:

  • Installing Next.js
  • Building pages & routes
  • Using layouts
  • Fetching data
  • Creating APIs
  • Deploying to Vercel

You can now start building a full-stack Next.js application.


If you want, I can continue this tutorial with:

  • Authentication (NextAuth)
  • Prisma + MongoDB
  • Dynamic routes
  • Middleware
  • File uploads
  • Admin dashboard


Just tell me! 🚀