Getting Started with Next.js 16

Next.js 16 brings powerful new features that make building full-stack web applications easier than ever. In this guide, we'll explore the key features and best practices.

What's New in Next.js 16

Server Components

Server Components allow you to render components on the server, reducing JavaScript sent to the client.

React TSX
14 linesCopy
1// app/posts/page.tsx
2export default async function Posts() {
3  const posts = await fetch('https://api.example.com/posts');
4  return (
5    <div>
6      {posts.map((post) => (
7        <article key={post.id}>
8          <h2>{post.title}</h2>
9          <p>{post.excerpt}</p>
10        </article>
11      ))}
12    </div>
13  );
14}

App Router

The App Router provides a file-based routing system with better organization and performance.

Project Structure

CODE
8 linesCopy
1app/
2├── layout.tsx          # Root layout
3├── page.tsx            # Home page
4├── about/
5│   └── page.tsx        # About page
6└── posts/
7    ├── page.tsx        # Posts list
8    └── [id]/page.tsx   # Individual post

Getting Started

Installation

Bash
3 linesCopy
1npx create-next-app@latest my-app --typescript
2cd my-app
3npm run dev

Create Your First Page

React TSX
14 linesCopy
1// app/about/page.tsx
2export const metadata = {
3  title: 'About Me',
4  description: 'Learn more about me',
5};
6
7export default function About() {
8  return (
9    <main>
10      <h1>About Me</h1>
11      <p>Welcome to my website!</p>
12    </main>
13  );
14}

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

Handle dynamic segments in your URL:

React TSX
4 linesCopy
1// app/posts/[id]/page.tsx
2export default function Post({ params }) {
3  return <h1>Post {params.id}</h1>;
4}

Data Fetching

Fetch data at build time or request time:

React TSX
13 linesCopy
1// Build time
2export async function generateStaticParams() {
3  const posts = await fetch('https://api.example.com/posts');
4  return posts.map((post) => ({ id: post.id }));
5}
6
7// Request time
8async function getPost(id) {
9  const res = await fetch(`https://api.example.com/posts/${id}`, {
10    cache: 'revalidate'
11  });
12  return res.json();
13}

Conclusion

Next.js 16 provides a modern development experience with great defaults. Start building your next project today!