Optimizing Next.js for Performance

// This component runs on the server
// Zero JavaScript sent to the client
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // For above-the-fold images
/>

export const runtime = 'edge';

export async function GET(request: Request) {
  // Runs close to your users
  return Response.json({ hello: 'world' });
}

// Cache for 1 hour, revalidate in background
export const revalidate = 3600;