Getting Started with Next.js 15 and React Server Components

Next.js 15 brings powerful new features that revolutionize how we build web applications. In this guide, we'll explore React Server Components and the app router.

Why Next.js 15?

Next.js has evolved from a simple React framework to a complete full-stack solution. Here are the key benefits:

Server Components by default - Better performance and SEO
Streaming and Suspense - Progressive page rendering
Built-in TypeScript support - Type safety out of the box
Optimized bundling - Faster builds and smaller bundles

Pro Tip

React Server Components allow you to render components on the server, reducing the JavaScript sent to the client and improving initial page load times.

Setting Up Your Project

First, create a new Next.js project with TypeScript:

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

This will scaffold a new project with all the necessary configuration files.

Understanding the App Router

The app router introduces a new file-based routing system. Here's the basic structure:

tsx
// app/page.tsx - Home page
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js 15!</h1>
    </main>
  );
}

Dynamic Routes

Create dynamic routes using folder names with brackets:

tsx
// app/blog/[slug]/page.tsx
interface PageProps {
  params: {
    slug: string;
  };
}

export default function BlogPost({ params }: PageProps) {
  return <h1>Blog Post: {params.slug}</h1>;
}

Best Practice

Always define proper TypeScript types for your page props to catch errors early and improve developer experience.

Server Components vs Client Components

By default, all components in the app directory are Server Components. Use "use client" when you need:

Interactive event handlers (onClick, onChange, etc.)
Browser-only APIs (localStorage, window, etc.)
React hooks (useState, useEffect, etc.)
Context providers

tsx
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Data Fetching

Server Components can fetch data directly:

tsx
async function getData() {
  const res = await fetch("https://api.example.com/data");
  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

Important

Remember to handle errors and loading states properly when fetching data. Use error.tsx and loading.tsx files for better user experience.

Conclusion

Next.js 15 with React Server Components represents the future of React development. The combination of server-side rendering, streaming, and optimized bundling creates incredibly fast and SEO-friendly applications.

Key Takeaways:

Use Server Components by default for better performance
Only use Client Components when necessary
Leverage the app router's file-based routing
Take advantage of built-in TypeScript support

Happy coding! 🚀