Deep Dive into Next.js App Router

The Next.js App Router represents a fundamental shift in how we build React applications. After spending several weeks migrating a project and building new features, here are my key takeaways.

$2

The most significant change is that components are now server components by default. This means:

- Components render on the server - JavaScript is not sent to the client unless needed - Direct database access is possible

// This runs on the server!
async function BlogPosts() {
  const posts = await db.posts.findMany()
  return (
    

      {posts.map(post => (
        
{post.title}
      ))}
    
  )
}

$2

The new layout system is incredibly powerful. Layouts persist across navigation, maintaining state and avoiding unnecessary re-renders.

$2

Gone are getServerSideProps and getStaticProps. Now we simply use async/await directly in components.

This has been a game-changer for my productivity and the overall developer experience.