Getting Started with Next.js 15: A Complete Guide

Next.js 15 represents a major milestone in React development. With full React 19 support, the stable App Router, and Turbopack now ready for production, this version delivers everything you need to build modern, high-performance web applications.

In this comprehensive guide, we'll explore the key features of Next.js 15 and show you how to leverage them in your projects.

What's New in Next.js 15

Next.js 15 introduces several groundbreaking features that change how we build React applications:

React 19 Support

Next.js 15 is the first framework to fully support React 19, bringing powerful new features like the React Compiler, improved Server Components, and enhanced concurrent rendering. This means better performance and simpler code.

Turbopack: Production Ready

Turbopack, the Rust-based bundler, is now stable for development. It offers up to 10x faster builds than Webpack. While production builds still use Webpack, Turbopack dramatically improves the development experience.

Async Request APIs

Request-specific APIs like cookies, headers, and params are now asynchronous. This change improves performance by allowing Next.js to prepare as much as possible before these values are needed.

Understanding the App Router

The App Router is the recommended way to build Next.js applications. It uses a file-system based routing approach with support for layouts, nested routing, and Server Components by default.

Key concepts:

• page.tsx - Defines a route's UI
• layout.tsx - Shared UI that wraps pages
• loading.tsx - Loading UI with Suspense
• error.tsx - Error handling boundary

Server Components vs Client Components

One of the most important concepts in Next.js 15 is understanding when to use Server Components versus Client Components.

Server Components (default) render on the server and send HTML to the client. They can directly access databases, read files, and keep sensitive data secure. Use them for static content and data fetching.

Client Components run in the browser and are needed for interactivity, state management, and browser APIs. Add

'use client';

import { useState } from 'react';

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

Data Fetching in Next.js 15

Next.js 15 simplifies data fetching with async Server Components. You can fetch data directly in your components without useEffect or external libraries:

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // Cache for 1 hour
  });
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Server Actions: Handling Forms

Server Actions allow you to run server-side code directly from your components. They're perfect for form submissions, data mutations, and any operation that needs server access:

// app/contact/actions.ts
'use server';

export async function submitContact(formData: FormData) {
  const email = formData.get('email');
  const message = formData.get('message');
  
  // Save to database, send email, etc.
  await saveToDatabase({ email, message });
  
  return { success: true };
}

Getting Started: Project Setup

Creating a new Next.js 15 project is simple:

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

The CLI will ask you about TypeScript, ESLint, Tailwind CSS, and other options. We recommend enabling all of them for the best development experience.

Conclusion: Build Better Web Apps

Next.js 15 provides everything you need to build fast, scalable, and SEO-friendly web applications. With React 19 support, the App Router, Server Components, and Turbopack, you have a powerful toolkit for modern web development.

Ready to build your next project with Next.js 15? Contact Lima Web Studios for expert development services and bring your ideas to life.