← Back to the journal
Next.jsReactWeb

Next.js 13: the App Router changes everything

Next.js 13 brings the App Router and React Server Components — a new mental model that shifts how I think about routing and rendering.

Next.js 13 is here, and the new app directory is more than another feature on the list. It breaks habits I've held for years. Much of it is still beta, and I'm treating it with care — but the direction is unmistakable.

A new mental model

For years, pages/ was home. One file, one route, with getServerSideProps or getStaticProps as the data layer. It worked, yet it separated things that belonged together. The App Router thinks differently. Routes become folders, and inside each one live building blocks with clear jobs: page for content, layout for the frame, loading and error for the states in between.

Nested layouts are the quiet revolution: what wraps stays in place while the content inside it moves.

Those nested layouts are the real win for me. A navigation, a sidebar state, a scroll context — all of it persists as the user moves between sub-pages. No rebuild, no flicker. It finally feels like the app I always wanted to build.

Server Components change what's static

The bigger leap is React Server Components. Components render on the server by default, fetch their data right there, and send only the result to the front end. Only when I need interactivity do I mark a component with "use client".

// app/projects/page.js — runs on the server
async function Projects() {
  const projects = await getProjects();
  return (
    <ul>
      {projects.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

No separate data-fetching mechanism, no API detour for something that already lives on the server. Fetching moves to where the data is. That less JavaScript reaches the client is a welcome side effect — for the animation-heavy pages I love to build, every kilobyte counts.

Honestly, I'm still rearranging my head. When server, when client? Where does the boundary run? It takes practice, and some libraries still lag behind. I wouldn't bet a critical client relaunch on it blindly today.

But as a glimpse of what's coming, it's convincing. Next.js 13 doesn't ask how I organize pages differently — it asks where code should actually run. That question will stay with us for years.