Introduction to Next.js | Next.js Tutorial

What is Next.js?

Next.js is a React framework that enables server-side rendering, static site generation, and full-stack capabilities. It's the most popular React framework, powering production applications at Netflix, TikTok, Twitch, Hulu, and thousands of other companies.

⚡ Why Next.js?

Zero Configuration

Automatic code splitting, routing, and optimization

Hybrid Rendering

Static, server-side, or client rendering per page

Full-Stack

API routes, Server Actions, database integration

Built-in Optimizations

Images, fonts, scripts automatically optimized

📖 Official Next.js Documentation →

Creating a New Project

Use the official scaffolder to create a production-ready project with sensible defaults and the App Router enabled, then start the dev server.

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

# Interactive prompts:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like to use src/ directory? No
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the default import alias? No

cd my-app
npm run dev

# Your app is running at http://localhost:3000

Project Structure

This layout shows the App Router conventions and where core files like layouts, pages, and API routes live in a typical Next.js app.

my-app/
├── app/                    # App Router (recommended)
│   ├── layout.tsx         # Root layout (required)
│   ├── page.tsx           # Home page (/)
│   ├── globals.css        # Global styles
│   ├── about/
│   │   └── page.tsx       # /about page
│   └── api/
│       └── hello/
│           └── route.ts   # API route /api/hello
├── public/                # Static assets
│   └── images/
├── components/            # React components
├── lib/                   # Utility functions
├── next.config.js         # Next.js configuration
├── tailwind.config.js     # Tailwind configuration
├── tsconfig.json          # TypeScript configuration
└── package.json

Your First Page

A page is a React component exported from page.tsx, and the root layout wraps all pages to share global UI like navigation and footer.

// app/page.tsx - Home page
export default function HomePage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js</h1>
      <p className="mt-4 text-gray-600">
        Get started by editing app/page.tsx
      </p>
    </main>
  );
}

// app/layout.tsx - Root layout (wraps all pages)
import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Built with Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header>{/* Navigation */}</header>
        {children}
        <footer>{/* Footer */}</footer>
      </body>
    </html>
  );
}

Adding More Pages

New routes are created by adding folders and page.tsx files. Dynamic segments use bracket syntax and receive params from the URL.

// app/about/page.tsx - /about
export default function AboutPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

// app/blog/page.tsx - /blog
export default function BlogPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Blog</h1>
    </div>
  );
}

// app/blog/[slug]/page.tsx - /blog/:slug (dynamic)
interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params;
  
  return (
    <article className="p-8">
      <h1 className="text-3xl font-bold">Post: {slug}</h1>
    </article>
  );
}

Next.js vs Create React App

Feature	Next.js	Create React App
Rendering	SSR, SSG, CSR, ISR	CSR only
Routing	Built-in file-based	Requires react-router
API Routes	Built-in	Separate server needed
SEO	Excellent	Poor (SPA)
Image Optimization	Built-in	Manual

Essential Commands

These scripts cover local development, production builds, and basic code quality checks.

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Type checking
npx tsc --noEmit

# Linting
npm run lint

💡 Getting Started Tips

• Always use the App Router (app/ directory) for new projects
• Start with TypeScript for better developer experience
• Use Tailwind CSS for rapid styling
• Check the official Next.js Learn course
• Explore the official examples