Introduction to Next.js 15 App Router

Next.js 15 introduces the powerful App Router for building modern web applications. In this article, we'll discuss the basics of using Next.js 15 with App Router.

What is App Router?

App Router is a new routing system in Next.js that gives us the ability to use:

• Server Components
• Streaming
• Built-in optimization
• and much more...

Setting Up Your First Project

To start a Next.js 15 project, we can use:

bash
npx create-next-app@latest my-app --typescript --tailwind --eslint

Directory Structure

App Router uses a different folder structure:

app/
├── layout.tsx
├── page.tsx
├── blog/
│   ├── page.tsx
│   └── [slug]/
│       └── page.tsx

Basic Component Example

Let's create a simple component:

tsx
// components/HelloWorld.tsx
export default function HelloWorld() {
  return (
    <div className="text-center py-8">
      <h1 className="text-3xl font-bold text-blue-600">
        Hello World with Next.js 15!
      </h1>
      <p className="mt-4 text-gray-600">
        Building modern web applications has never been easier.
      </p>
    </div>
  );
}

Key Features

1. Server Components

Server components allow us to:

• Reduce bundle size
• Better performance
• Automatic code splitting

2. Streaming

Streaming makes applications feel faster with:

• Progressive rendering
• Selective hydration
• Better user experience

Conclusion

Next.js 15 with App Router provides an amazing developer experience for building modern web applications. Stay tuned for upcoming articles about advanced features!