Next.js Introduction

Posted on In ,

Next.js is a full-stack React framework for building fast, SEO-friendly web applications. It combines file-based routing, server rendering, static generation, API handling, and built-in performance optimizations (such as smarter image loading and code splitting) so you can ship production-ready apps with less setup.

What is Next.js

Next.js is an open-source framework built on top of React. It helps you build full-stack web applications by providing conventions and tooling for:

  • Routing with the app/ or pages/ directory
  • Server-side rendering (SSR)
  • Static site generation (SSG)
  • API endpoints
  • Image and font optimization
  • Built-in support for TypeScript, ESLint, and modern bundling

If React gives you UI building blocks, Next.js gives you a complete framework to ship applications faster.

Prerequisites

Before installing Next.js, make sure your environment is ready.

  • Node.js version 14.0 or later (LTS recommended)
  • VS Code or another code editor

Installation Guidelines

Create a new Next.js project

The easiest way is to use create-next-app.

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

During setup, you may be asked to choose options such as:

  • TypeScript
  • ESLint
  • Tailwind CSS
  • src/ directory usage
  • App Router

You can select based on your project preference. A safe default for new projects is to enable TypeScript, ESLint, and App Router.

Then move into the project directory:

1
cd my-next-app

Start the development server

Run:

1
npm run dev

Open your browser at http://localhost:3000.

You should see the default Next.js welcome page.

Project scripts

Common npm scripts:

  • npm run dev — start development server
  • npm run build — build for production
  • npm run start — run production build locally
  • npm run lint — run lint checks

Basic Project Structure

For App Router projects, common folders include:

  • app/ — routes, layouts, and pages
  • public/ — static assets
  • next.config.js or next.config.ts — framework config
  • package.json — dependencies and scripts

A very simple page example in app/page.tsx:

1
2
3
4
5
6
7
8
export default function HomePage() {
  return (
    <main>
      <h1>Hello Next.js</h1>
      <p>Your first Next.js page is running.</p>
    </main>
  );
}

Key Concepts

The Core Philosophy

In a standard React app (Vite/CRA), you ship an empty HTML file and a giant JavaScript bundle. The browser downloads the JS, runs it, and then the user sees the UI.

In Next.js, the server pre-renders the HTML. The user sees the content instantly, and then React “hydrates” it to make it interactive. This is why Next.js is the king of SEO and performance.

Routing: No More react-router-dom

Next.js uses File-Based Routing. You don’t write a <Routes> component. Instead, your file structure is your URL structure.

  • App Router (Modern Standard): Uses the app/ directory.
  • app/page.tsx → /
  • app/about/page.tsx → /about
  • app/blog/[slug]/page.tsx → /blog/:slug
  • app/products/[id]/configs/[configId]/page.tsx → /products/:id/configs/:configId

The “Two Worlds”: Server vs. Client

This is the biggest shift for React devs. By default, every component in the app/ directory is a Server Component.

Feature Server Components (Default) Client Components
Directives None Must add 'use client' at the top
State/Effects No useState or useEffect All React hooks allowed
Data Fetching Can be async (fetch directly) Use useEffect or SWR/TanStack
Bundle Size 0kb sent to client Sent to client

Rule of Thumb: Use Server Components for fetching data and static UI. Use Client Components only when you need interactivity (onClick, forms, state).

Simplified Data Fetching

Forget useEffect for initial data. Since Server Components can be async, fetching data looks like standard JavaScript:

1
2
3
4
5
6
7
8
// This runs on the server. No 'loading' state needed!
export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return <div>{data.title}</div>;
}

Built-in Optimizations

Next.js replaces standard HTML tags with smarter versions:

  • <Link>: Automatically prefetches the linked page in the background.
  • <Image>: Automatically resizes images, prevents layout shift, and serves WebP format.
  • <Font>: Self-hosts Google Fonts so there’s zero layout shift on load.

References