Getting Started with Next.js 16

What's New in Next.js 16

Server Components

// app/posts/page.tsx
export default async function Posts() {
  const posts = await fetch('https://api.example.com/posts');
  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

App Router

Project Structure

app/
├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── about/
│   └── page.tsx        # About page
└── posts/
    ├── page.tsx        # Posts list
    └── [id]/page.tsx   # Individual post

Getting Started

Installation

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

Create Your First Page

// app/about/page.tsx
export const metadata = {
  title: 'About Me',
  description: 'Learn more about me',
};

export default function About() {
  return (
    <main>
      <h1>About Me</h1>
      <p>Welcome to my website!</p>
    </main>
  );
}

Best Practices

1. Use Server Components by default - Only use Client Components when you need interactivity
2. Organize your routes logically - Use folders to group related pages
3. Optimize images - Always use the Next.js Image component
4. Leverage metadata - Use the generateMetadata function for SEO

Key Features

Dynamic Routes

// app/posts/[id]/page.tsx
export default function Post({ params }) {
  return <h1>Post {params.id}</h1>;
}

Data Fetching

// Build time
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts');
  return posts.map((post) => ({ id: post.id }));
}

// Request time
async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    cache: 'revalidate'
  });
  return res.json();
}

Conclusion