5 Next.js Tips Every Developer Should Know 🔥

While working with Next.js, I've realized that there are a few repetitive tricks every developer should know when studying and using Next.js. Here are five essential Next.js tricks that every developer should master:

1. Prefetching for Faster Navigation

Next.js automatically prefetches links when they appear in the viewport, improving performance. However, you can manually control prefetching for better optimization.

import Link from "next/link";

<Link href="/about" prefetch={false}>Go to About</Link>

This prevents unnecessary prefetching, which is useful for less frequently accessed pages.

---

2. Middleware for Edge Functions

Next.js Middleware runs before the request reaches the server, allowing you to modify requests, perform redirects, and handle authentication.

import { NextResponse } from "next/server";

export function middleware(req) {
  const token = req.cookies.get("auth");
  if (!token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

Place this in middleware.ts to protect routes dynamically.

---

3. API Routes Inside the app Directory

Next.js 15 (App Router) allows API routes to be placed inside the app/api directory.

// app/api/posts/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello from API" });
}

Now, GET /api/posts will return JSON data, simplifying API route management.

---

4. Dynamic Imports to Reduce Bundle Size

Next.js allows lazy loading of components using next/dynamic, improving page performance.

import dynamic from "next/dynamic";

const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
  ssr: false, // Prevents loading on the server
  loading: () => <p>Loading...</p>,
});

This ensures that large components are only loaded when needed.

---

5. Revalidating Pages with ISR (Incremental Static Regeneration)

Next.js allows on-demand revalidation to update static content without rebuilding the entire app.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

This ensures your site remains fast while keeping data fresh.

---

These five Next.js tricks can significantly improve performance, user experience, and maintainability in your applications.