Next.js Performance Patterns I Use on Every Project

Practical performance patterns for Next.js apps — from route-level code splitting and image optimization to server component strategies that cut bundle size in half.

Why Performance Matters

Speed is a feature. Next.js gives you a lot of tools out of the box, but it is still easy to ship a massive bundle if you are not careful.

Server Components by Default

Always default to Server Components. If a component does not need useState, useEffect, or DOM event listeners, it should render on the server.

// This component ships zero JavaScript to the client!
export default async function TopPosts() {
  const posts = await db.query('SELECT * FROM posts LIMIT 5');
  
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Pro Tip: If you need a small slice of interactivity (like a "Like" button), create a microscopic Client Component just for that button and leave the rest of the layout on the server.