Getting Started

Next.js Introduction

Learn what Next.js is and how it extends React with server-side rendering, routing, and more.

What is Next.js?

Next.js is a React framework that gives you building blocks to create full-stack web applications. It extends React by providing:

File-based routing: Create routes by adding files to the app/ directory
Server-side rendering (SSR): Pages rendered on the server for better SEO and performance
Static site generation (SSG): Pages generated at build time
API routes: Build your backend directly in Next.js
Image optimization: Automatic image optimization with the next/image component
Zero configuration: Works out of the box with sensible defaults

App Router vs Pages Router

Next.js 13+ introduced the App Router using React Server Components. This tutorial uses the App Router (recommended).

Creating a Next.js App

bash

npx create-next-app@latest my-app

Example

jsx

// app/page.tsx - Home page (Server Component by default)
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>This page is server-rendered by default.</p>
    </main>
  );
}

// app/layout.tsx - Root layout (wraps all pages)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <nav>My App Navigation</nav>
        {children}
        <footer>Footer</footer>
      </body>
    </html>
  );
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configuration options
};
module.exports = nextConfig;

Try it yourself — JSX