One of Next.js’s biggest flexes is its flexible rendering modes. Choosing the wrong one can slow things down big time, so let’s unpack each:

• Static Site Generation (SSG): Pre-renders HTML at build time. Perfect for blogs, docs, or marketing pages that barely change.
• Server-Side Rendering (SSR): HTML is generated at request time. Good for live dashboards, stock data, or news tickers.
• Incremental Static Regeneration (ISR): Hybrid approach: pre-renders at build, then updates pages after a set time. Best for eCommerce or blogs that add content frequently.
• Client-Side Rendering (CSR): Fetches data directly in the browser via hooks (useEffect, SWR). Great for components that need instant interactivity (like chat UIs).

Example: Implementing ISR for a blog

// pages/blog/[slug].jsimport { getPost, getAllPosts } from "@/lib/api";

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(post => ({ params: { slug: post.slug } })),
    fallback: "blocking",
  };
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  return {
    props: { post },
    revalidate: 60, // regenerate every 60s
  };
}

export default function BlogPost({ post }) {
  return 
{post.title}
;
}

Pro tip:

• Use ISR for 70–80% of pages (fast + scalable).
• Reserve SSR only for ultra-fresh data.

Learn more about next js click here

Images are usually the heaviest assets on any site. Thankfully, Next.js’s <Image />component automatically:

• Compresses images
• Lazy-loads below-the-fold content
• Serves modern formats (WebP, AVIF)
• Creates responsive sizes

Example: Hero image optimization

import Image from "next/image";

export default function HeroBanner() {
  return (
    
  );
}

Example: Responsive product images

<Image  src="/products/shoes.png"
  alt="Running Shoes"
  width={500}
  height={500}
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         33vw" />

• Use priorityonly for images above the fold.
• Always set widthand height to prevent layout shifts.
• Consider using a CDN for global delivery.

Too much JS = sluggish site. Keep it lean:

• Dynamic Imports: Load only when needed.

  import dynamic from "next/dynamic";
  
  const Chart = dynamic(() => import("../components/Chart"), { ssr: false });
  

• Tree Shaking: Next.js auto-removes unused code during builds.
• Replace Heavy Libraries: e.g., swap moment.js for date-fns.
• Analyze Bundles: Install analyzer:

  npm install @next/bundle-analyzer
  
  // next.config.js
  const withBundleAnalyzer = require("@next/bundle-analyzer")({
    enabled: process.env.ANALYZE === "true",
  });
  module.exports = withBundleAnalyzer({});
  

Run ANALYZE=true npm run build → view bundle stats.

Caching = free performance boost.

• Static Assets: Next.js auto-caches images, JS, fonts.
• API Responses: Cache data when freshness isn’t critical.
• Global Delivery: Deploy via Vercel Edge or CDNs like Cloudflare.

Example: Setting cache headers

// pages/api/products.js
export default function handler(req, res) {
  res.setHeader("Cache-Control", "s-maxage=60, stale-while-revalidate");
  res.json({ products: [] });
}

Navigation speed is where Next.js shines.

• Dynamic Routes: /pages/products/[id].js keeps structure scalable.
• Dynamic Routes: Load pages in the background with next/link.

import Link from "next/link";

<Link href="/blog/first-post" prefetch>Primary Button</Link>

Don’t prefetch everything—it can bloat network usage.

Google’s Core Web Vitals matter for both UX + SEO:

• LCP (Largest Contentful Paint): Load big images/text fast.
• FID (First Input Delay): Reduce JS execution.
• CLS (Cumulative Layout Shift): Avoid unexpected shifts.

Quick fixes:

• Lazy-load non-critical scripts with next/script.
• Optimize fonts via built-in Next.js font loader.
• Always set width & height for media.
• Use React 18’s concurrent features for smoother UX.

Your Next.js app can include backend logic—but keep it lean:

• Validate user input to avoid attacks.
• Cache heavy API responses.
• Use Edge Functions for time-sensitive tasks (auth, personalization)

Example: Input validation

// pages/api/contact.js 
export default function handler(req, res) {
  const { name, email } = req.body;
  if (!email.includes("@")) {
    return res.status(400).json({ error: "Invalid email" });
  }
  res.status(200).json({ success: true });
}

Middleware lets you intercept requests before hitting routes.

Example: Redirecting non-logged-in users

// middleware.jsimport { NextResponse } from "next/server";
export function middleware(req) {
  const token = req.cookies.get("token");
  if (!token) return NextResponse.redirect("/login");
}

Use cases:

• A/B testing
• Geo-based personalization
• Authentication checks

The heavier your project, the slower it builds + runs.

• Run npm lsor yarn listto audit packages.
• Replace giant libraries with modular ones.
• Remove unused packages.

Rule of thumb: “If you only use 5% of a library, ditch it.”

Performance is not a one-time setup—it’s ongoing.

• Lighthouse: Quick audits.
• WebPageTest: Deeper performance testing.
• Vercel Analytics / Sentry: Real-time monitoring.
• Bundle Analysis: Run after each deploy.

Example: Add Lighthouse CI to CI/CD

npm install -g @lhci/cli
lhci autorun

Next.js is like a sports car—it’s fast by default, but only if you know how to drive it.

• Picking the right rendering mode
• Optimizing images
• Cutting JS bloat
• Leveraging caching & CDNs
• Monitoring continuously

You can ensure your site feels instant, scales globally, and ranks high in search results.

Remember: performance is a journey, not a checkbox. The best dev teams treat it as an ongoing cycle of testing and optimizing.

So go build, measure, tweak, and repeat—your users (and Google) will thank you.