Getting Started with Next.js 15

Next.js 15 brings exciting new features and improvements. Let's explore how to build modern web applications with this powerful framework.

Why Next.js?

Next.js is a React framework that provides:

Project Setup

Create a new Next.js project:

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

App Router Structure

The App Router uses a file-system based router:

app/
├── layout.tsx      # Root layout
├── page.tsx        # Home page
├── about/
│   └── page.tsx    # About page
└── blog/
    ├── page.tsx    # Blog list
    └── [slug]/
        └── page.tsx # Blog post

Server Components

By default, all components in the App Router are Server Components:

// This runs on the server
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts')
  const data = await posts.json()
  
  return (
    <ul>
      {data.map((post: { id: string; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Client Components

For interactivity, use the 'use client' directive:

'use client'

import { useState } from 'react'

export function LikeButton() {
  const [likes, setLikes] = useState(0)
  
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} likes
    </button>
  )
}

Data Fetching

Next.js 15 simplifies data fetching:

async function Page() {
  // This fetch is automatically cached
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return <div>{data.title}</div>
}

Best Practices

1. Use Server Components when possible for better performance
2. Minimize client-side JavaScript by keeping interactivity isolated
3. Leverage caching with proper fetch configurations
4. Implement loading states with loading.tsx files
5. Handle errors gracefully with error.tsx boundaries

Conclusion

Next.js 15 provides a powerful foundation for building modern web applications. Start exploring and building amazing things!

---

Happy coding! 🚀