Next.js App Router: Master Dynamic Routes and Optimize Performance

Next.js 13 introduced the App Router, revolutionizing how we handle routing, layouts, and data fetching in React applications. This blog dives deep into dynamic routes, nested layouts, and performance optimization techniques.

Why Next.js App Router Matters

The App Router provides better structure for large projects, simplifies dynamic routing, and supports server components for faster load times and better SEO.

Dynamic Routes in Next.js

Dynamic segments allow creating pages programmatically without manually defining every route. Use square brackets in your file names, e.g., [id].tsx or [slug].tsx.

Example: Dynamic Blog Page

// app/blogs/[id]/page.tsx
import { blogData } from '@/data/blogData';

export default function BlogPage({ params }: { params: { id: string } }) {
  const blog = blogData.find(b => b.id === Number(params.id));

  if (!blog) return <p className="text-center pt-32">Blog not found</p>;

  return (
    <article className="max-w-3xl mx-auto p-6">
      <h1 className="text-4xl font-bold mb-4">{blog.title}</h1>
      <p className="text-gray-500 mb-6">By {blog.author} | {blog.date}</p>
      <img src={blog.image} alt={blog.title} className="mb-6 rounded-lg" />
      {blog.content.map((c, i) => {
        switch (c.type) {
          case 'paragraph': return <p key={i} className="mb-4">{c.text}</p>;
          case 'heading': return <h2 key={i} className="text-2xl font-semibold mt-6 mb-2">{c.text}</h2>;
          case 'subheading': return <h3 key={i} className="text-xl font-medium mt-4 mb-2">{c.text}</h3>;
          case 'code': return <pre key={i} className="bg-gray-100 p-4 rounded mb-4 overflow-x-auto">{c.code}</pre>;
        }
      })}
    </article>
  );
}

Nested Layouts and Loading States

App Router supports nested layouts so you can define consistent UI structures. Use loading.tsx for suspense-based loading and error.tsx for error boundaries.

// app/blogs/layout.tsx
export default function BlogsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="px-6 py-10 max-w-5xl mx-auto">
      <aside className="mb-6">Sidebar / Categories</aside>
      <main>{children}</main>
    </div>
  );
}

Performance Optimization Tips

Use server components wherever possible, cache data with fetch caching, and lazy load client components to reduce bundle size.

Example: Fetching Data in a Server Component

// app/blogs/[id]/page.tsx
export const revalidate = 60; // ISR every 60 seconds

async function getBlog(id: string) {
  const res = await fetch('https://api.example.com/blogs/' + id);
  return res.json();
}

Conclusion

Mastering the Next.js App Router allows you to build scalable, maintainable React projects with dynamic routes, nested layouts, and optimized performance. Combine it with server components and incremental static regeneration to achieve lightning-fast apps.