What Is Next.js?

💡 Why Next.js Matters

• File-based routing. Create a file, get a page. No config, no router setup.
• Server Components. Fetch data directly in components — no useEffect, no loading state juggling.
• Built-in API routes. Add backend endpoints in the same project.
• Automatic image optimization. Resize, lazy-load, and convert formats for free.
• Deploy anywhere. Vercel, Netlify, Docker, or your own server.
• SEO-friendly. Pages render on the server, so Google sees full HTML.

⚖️ React vs Next.js

Same component code, different features around it:

Plain React (with Vite):

// You handle routing manually
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Client-only rendering
// Extra libraries for SSR, images, API, etc.

Next.js:

// File-based routing:
// app/page.jsx        -> /
// app/about/page.jsx  -> /about
// app/blog/[slug]/page.jsx -> /blog/:slug

// Server components by default
async function Page() {
    const data = await fetch('https://api.example.com/data');
    return <div>{data}</div>;
}

Less setup, more built-in features, better defaults.

🧩 Core Next.js Concepts

• App Router — folders define routes. app/about/page.tsx becomes /about.
• Server Components — run on the server, ship no JS to the browser. The default in Next.js.
• Client Components — run in the browser. Add "use client" at the top of the file to opt in.
• API Routes — app/api/hello/route.ts becomes /api/hello.
• Layouts — shared UI that wraps pages, like a navbar that stays on every route.
• Metadata — export a metadata object from any page for SEO tags.

📁 A Basic Next.js Project Structure

my-nextjs-app/
├── app/
│   ├── layout.tsx      ← shared layout
│   ├── page.tsx        ← homepage (/)
│   ├── about/
│   │   └── page.tsx    ← /about
│   ├── blog/
│   │   └── [slug]/
│   │       └── page.tsx ← /blog/:slug
│   └── api/
│       └── hello/
│           └── route.ts ← /api/hello
├── public/             ← static assets
├── package.json
└── next.config.js

Every folder inside app/ becomes a URL. That's the whole routing system.

🚫 Common Beginner Mistakes

• Using Next.js before React. Learn React first — Next.js adds to it, doesn't replace it.
• Adding "use client" everywhere. That defeats the purpose. Only use it when you need interactivity.
• Trying to use browser APIs in Server Components. Things like window or localStorage don't exist on the server.
• Fetching data in useEffect. In Next.js, fetch directly in Server Components instead.
• Deploying without setting environment variables. Next.js reads .env.local locally but needs them configured on the host.

❓ Frequently Asked Questions

🎯 What's Next?