Next.js Intro

Next.js Intro: What Is Next.js and Why Use It?

Next.js is a full-stack React framework created by Vercel for building fast web applications. It adds server rendering, file-based routing, and automatic bundling on top of standard React.

Plain React renders components in the browser after downloading a JavaScript bundle. Next.js renders components on the server first and sends ready HTML to the browser. This improves initial page speed and helps search engines index your content.

flowchart LR
    A["Browser Request"] --> B["Next.js Server"]
    B --> C["Render Server Components"]
    C --> D["Send HTML + Minimal JS"]
    D --> E["Fast Interactive Page"]

Core Features of Modern Next.js

Modern Next.js centers on the app/ directory, called the App Router, which uses React Server Components by default. You write standard React components and Next.js handles routing, splitting, and server execution.

• App Router (app/): Maps folders directly to URL paths with shared layouts and loading states.
• Server Components: Run on the server and ship zero component JavaScript to the browser.
• Server Actions: Let forms call async server functions directly without manual API boilerplate.
• Built-In Optimization: Compress images with next/image, self-host fonts with next/font, and manage SEO metadata.

Creating Your First Next.js Page

Start a new project using create-next-app, which sets up TypeScript, Tailwind CSS, and ESLint automatically.

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

Open http://localhost:3000 in your browser to see your running app. Every edit inside app/page.tsx updates in the browser right away.

// app/page.tsx - Server Component by default
export default function HomePage() {
  return (
    <main className="p-8 max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-4">Welcome to Next.js</h2>
      <p className="text-gray-600">
        This page renders on the server before reaching the browser.
      </p>
    </main>
  );
}

Common Mistakes

• Using the legacy pages/ folder for new apps: Start new projects in app/ to access Server Components and streaming.
• Adding 'use client' to every file: Keep components on the server unless they need browser events or React hooks like useState.
• Mixing server secrets into client files: Keep database queries and private keys inside Server Components or Server Actions only.

Frequently Asked Questions

What is the difference between React and Next.js?

React is a UI library for building components and managing view state. Next.js is a framework built on React that adds routing, server rendering, caching, and production optimization.

Do I need a separate backend server with Next.js?

No, you can run server logic inside Server Components, Server Actions, and Route Handlers. Many small and medium apps run both frontend and backend inside one Next.js codebase.

Which Next.js router should beginners learn first?

Learn the App Router inside the app/ directory first. It is the modern standard and receives all new React Server Component features.