Mastering Next.js App Router

The Next.js App Router has fundamentally changed how we architect React applications. By moving routing to the file system and making components server-rendered by default, we've unlocked a new level of performance and developer experience.

Why Server Components?

React Server Components (RSC) allow you to render components on the server, which means zero JavaScript is sent to the client for those components. This results in faster page loads and improved SEO. It is especially useful when creating highly optimized, fast frontends like the ones discussed in my post about web-design-trends-2026.

Dynamic Routing

Creating dynamic routes is as simple as adding brackets [slug] to your folder names. This is how this exact blog is built! For example, when you navigate to /blog/some-post, it correctly resolves the slug and fetches the markdown file.

export default function BlogPost({ params }: { params: { slug: string } }) {
  const post = getPostBySlug(params.slug);
  return (
    <article className="prose dark:prose-invert">
      <h1>{post.title}</h1>
      <MDXContent code={post.body.code} />
    </article>
  );
}

Next.js gives you everything you need to build a massive knowledge base—something you'd need if you are serious about personal-knowledge-management.