Introduction to Next.js

Introduction to Next.js

Next.js is a React framework created by Vercel that provides a complete solution for building production-ready web applications. While React itself is a library focused on building user interfaces, Next.js adds the infrastructure needed for real applications: server-side rendering, static site generation, file-based routing, API routes, image optimization, and much more. Next.js has become the most popular React framework, used by companies like Netflix, TikTok, Hulu, Nike, and Twitch. It eliminates the complex configuration that plagues vanilla React projects and provides sensible defaults that work for the vast majority of use cases.

Why Next.js?

A standard React application rendered entirely on the client has significant limitations: poor SEO because search engines see an empty HTML page, slow initial load times as the browser downloads and executes JavaScript before showing any content, and complex build configurations for code splitting and optimization. Next.js solves these problems by rendering pages on the server (or at build time), sending fully formed HTML to the browser, and then hydrating the page with interactivity. The result is fast initial page loads, excellent SEO, and a superior developer experience.

Creating a Next.js App

The official way to create a Next.js project is with create-next-app, which sets up everything automatically including TypeScript, ESLint, Tailwind CSS, and the project structure.

# Create a new Next.js project
npx create-next-app@latest my-next-app

# Follow the prompts:
# - TypeScript? Yes
# - ESLint? Yes
# - Tailwind CSS? Yes
# - src/ directory? Yes
# - App Router? Yes
# - Import alias? @/*

cd my-next-app
npm run dev

# Open http://localhost:3000 in your browser

Project Structure

Next.js uses a well-defined project structure. The app directory (App Router) or pages directory (Pages Router) is where your routes live. Each file and folder in these directories maps to a URL path.

my-next-app/
  src/
    app/                  # App Router (Next.js 13+)
      layout.tsx          # Root layout (shared across all pages)
      page.tsx            # Home page (/)
      globals.css         # Global styles
      about/
        page.tsx          # About page (/about)
      blog/
        page.tsx          # Blog list (/blog)
        [slug]/
          page.tsx        # Blog post (/blog/my-post)
      api/
        hello/
          route.ts        # API endpoint (/api/hello)
    components/           # Reusable components
    lib/                  # Utility functions and configs
  public/                 # Static files (images, favicon)
  next.config.js          # Next.js configuration
  package.json
  tsconfig.json

Your First Page

// src/app/page.tsx — the home page
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This page is server-rendered by default. View the page source
        in your browser to see the fully rendered HTML.
      </p>
    </main>
  );
}

Tip: Next.js 13+ introduced the App Router with React Server Components as the default. All components in the app directory are Server Components by default — they run on the server and send only HTML to the client. Add "use client" at the top of a file to make it a Client Component that can use hooks, state, and browser APIs.

Key Takeaways

• Next.js is a full-featured React framework that adds SSR, SSG, routing, and API routes to React.
• Create projects with npx create-next-app@latest for a pre-configured setup.
• The App Router (Next.js 13+) uses file-system-based routing in the app directory.
• Components are Server Components by default; add "use client" for client-side interactivity.
• Next.js provides excellent developer experience with hot reloading, TypeScript support, and sensible defaults.