Performance, SEO & Production

LCP  → prioritize hero image, static shell/PPR, edge caching, font preload
INP  → reduce client JS, Server Components, code splitting, avoid long tasks
CLS  → next/image dimensions, font swap, reserve skeleton space

// app/components/WebVitals.tsx
"use client";
 
import { useReportWebVitals } from "next/web-vitals";
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    const body = JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
      rating: metric.rating,
      path: window.location.pathname,
    });
    navigator.sendBeacon("/api/vitals", body);
  });
  return null;
}

import Image from "next/image";
 
export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Product showcase"
      width={1200}
      height={630}
      priority          // LCP candidate — preload, no lazy load
      sizes="(max-width: 768px) 100vw, 1200px"
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.example.com", pathname: "/assets/**" },
    ],
  },
};
export default nextConfig;

LCP image           → priority + correct sizes
Below fold          → default lazy load
Always              → explicit dimensions or fill + sized parent
Avoid               → CSS-only background-image for LCP element

// app/layout.tsx
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

import localFont from "next/font/local";
 
const brand = localFont({
  src: "../public/fonts/Brand.woff2",
  display: "swap",
  variable: "--font-brand",
});

// app/dashboard/page.tsx — heavy chart only loads on dashboard
import dynamic from "next/dynamic";
 
const RevenueChart = dynamic(() => import("./RevenueChart"), {
  ssr: false,
  loading: () => <div className="skeleton h-64" />,
});
 
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <RevenueChart />
    </main>
  );
}

ANALYZE=true npm run build   # with @next/bundle-analyzer configured

Keep server by default     → 'use client' only for interactivity
Dynamic import heavy libs  → charts, editors, maps
Barrel files               → can pull entire libraries — import direct paths
Shared chunks              → inspect duplicate deps across routes

import Link from "next/link";
 
export function Nav() {
  return (
    <nav>
      <Link href="/dashboard" prefetch={true}>Dashboard</Link>
      <Link href="/settings" prefetch={false}>Settings</Link>
    </nav>
  );
}

prefetch={true}   → prefetch when link enters viewport (production)
prefetch={false}  → skip — heavy or auth-gated routes
router.refresh()  → bust Router Cache for current route
Hard reload       → full cache clear

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
 
type Props = { params: Promise<{ slug: string }> };
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
 
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverUrl, width: 1200, height: 630 }],
      type: "article",
    },
    alternates: { canonical: `https://example.com/blog/${slug}` },
  };
}

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: { default: "Example", template: "%s | Example" },
  robots: { index: true, follow: true },
};

// app/sitemap.ts
import type { MetadataRoute } from "next";
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await db.post.findMany({ select: { slug: true, updatedAt: true } });
 
  return [
    { url: "https://example.com", lastModified: new Date(), changeFrequency: "daily", priority: 1 },
    ...posts.map((p) => ({
      url: `https://example.com/blog/${p.slug}`,
      lastModified: p.updatedAt,
      changeFrequency: "weekly" as const,
      priority: 0.8,
    })),
  ];
}

// app/robots.ts
import type { MetadataRoute } from "next";
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: "*", allow: "/", disallow: ["/admin/", "/api/"] },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}

Build           → npm run build; inspect bundle analyzer output
Caching         → CDN + Full Route Cache; verify ISR/PPR flags per route
Env             → server-only secrets in process.env, never NEXT_PUBLIC_ for secrets
Observability   → Web Vitals RUM, server traces, error tracking (Sentry)
Headers         → security headers in next.config or middleware
Smoke test      → cold start, auth flows, soft navigation after mutation

const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
        ],
      },
    ];
  },
};

LCP  → "Hero image + shell at edge + fonts without FOIT."
INP  → "Less main-thread JS; Server Components first."
CLS  → "Dimensions on images; skeletons reserve space."
Prefetch → "RSC payload ahead of click — disable on heavy routes."

Hero image        → next/image + priority + sizes
Interactive chart → dynamic(() => import(...), { ssr: false })
Blog SEO          → generateMetadata + sitemap entry on publish
After mutation      → revalidatePath so prefetch stays fresh
Production          → RUM vitals + bundle analysis every release