Getting Started with Next.js 16

What is Next.js?

Next.js is a React framework that gives you building blocks for creating fast web applications. Version 16 brings exciting improvements to the developer experience.

Key Features

App Router

The App Router uses React Server Components by default, which means better performance out of the box.

// app/page.tsx - This is a Server Component
export default function Page() {
  return <h1>Hello from the server!</h1>;
}

Server Components

Server Components run only on the server. They can directly access your database, file system, or any server-side resource.

// This component fetches data on the server
async function BlogPosts() {
  const posts = await getAllPosts(); // Direct file system access
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

Client Components

When you need interactivity, use 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>;
}

Getting Started

Create a new Next.js project:

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

That's it! You now have a working Next.js application.

Conclusion

Next.js makes it straightforward to build modern web applications. The combination of Server and Client Components gives you the best of both worlds.