Getting Started with Next.js 15

Next.js 15 is the latest version of the React framework that brings powerful features for building modern web applications. In this guide, we’ll explore the key concepts and get you started on your Next.js journey.

What is Next.js?

Next.js is a React framework that provides:

• Server-Side Rendering (SSR): Improved SEO and performance
• Static Site Generation (SSG): Pre-render pages at build time
• API Routes: Build backend functionality alongside your frontend
• File-based Routing: Automatic routing based on your file structure
• Built-in Optimizations: Image optimization, code splitting, and more

App Router vs Pages Router

Next.js 15 uses the App Router by default, which is built on React Server Components. This provides:

• Better performance with Server Components
• Improved data fetching patterns
• Enhanced developer experience
• Built-in layouts and loading states

Creating Your First Page

In the App Router, pages are created using page.tsx files:

TypeScript

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

Server Components

Server Components run on the server, reducing the JavaScript bundle sent to the client:

TypeScript

// This runs on the server
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
 
  return <div>{json.title}</div>;
}

Client Components

When you need interactivity, use the 'use client' directive:

TypeScript

'use client';
 
import { useState } from 'react';
 
export default function ClientComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Next Steps

1. Explore the Next.js documentation
2. Try building a sample project
3. Learn about data fetching patterns
4. Experiment with Server and Client Components

Happy coding!