Getting Started with Next.js 15

Next.js 15 brings exciting new features that make building web applications easier than ever. In this guide, we'll explore the key concepts you need to know.

Why Next.js?

Next.js provides a great developer experience with features like:

• Server Components - Render components on the server for better performance
• App Router - A new routing system based on React Server Components
• Built-in Optimizations - Automatic image, font, and script optimization

Getting Started

First, create a new Next.js project:

npx create-next-app@latest my-app
cd my-app
npm run dev

Creating Your First Page

In Next.js 15, pages are created in the app directory:

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

Server vs Client Components

By default, all components in the app directory are Server Components. To use client-side features, add the "use client" directive:

"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

What's Next?

Now that you understand the basics, explore more advanced topics like data fetching, authentication, and deployment.