Best Practices

// Static data — cache indefinitely (default)
const config = await fetch("/api/config");
// Time-based revalidation — refresh every hour
const prices = await fetch("/api/prices", {
  next: { revalidate: 3600 },
});
// Never cache — always fresh (dynamic data)
const cart = await fetch("/api/cart", {
  cache: "no-store",
});
// Tag for on-demand invalidation
const products = await fetch("/api/products", {
  next: {
    tags: ["products"],
    revalidate: 300, // also revalidate every 5 min
  },
});

// Invalidation from a Server Action
"use server";
import {
  revalidateTag,
  revalidatePath,
} from "next/cache";
export async function updateProduct(id: string, data) {
  await db.product.update({ where: { id }, data });
  // Purge all responses tagged "products"
  revalidateTag("products");
  // Also purge the product detail page
  revalidatePath(`/products/${id}`);
}
// On-demand purge via route handler
// app/api/revalidate/route.ts
export async function POST(req: Request) {
  const { tag, secret } = await req.json();
  if (secret !== process.env.REVALIDATE_SECRET)
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  revalidateTag(tag);
  return Response.json({ revalidated: true });
}

// actions/post.ts
"use server";
import { z } from "zod";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { revalidatePath, revalidateTag } from "next/cache";
// Zod schema — validates inputs before touching DB
const CreatePostSchema = z.object({
  title: z.string().min(3).max(100),
  content: z.string().min(10),
  categoryId: z.string().uuid(),
});
type ActionState = {
  errors?: { title?: string[]; content?: string[] };
  message?: string;
  success?: boolean;
};
export async function createPost(
  _prevState: ActionState,
  formData: FormData,
): Promise<ActionState> {
  // 1. Authenticate
  const session = await auth();
  if (!session?.user?.id) {
    return { message: "Unauthorised" };
  }
  // 2. Validate
  const parsed = CreatePostSchema.safeParse({
    title: formData.get("title"),
    content: formData.get("content"),
    categoryId: formData.get("categoryId"),
  });
  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }
  // 3. Authorise resource (verify category exists & is accessible)
  const category = await db.category.findUnique({
    where: { id: parsed.data.categoryId },
  });
  if (!category) return { message: "Category not found" };
  // 4. Mutate
  await db.post.create({
    data: {
      ...parsed.data,
      authorId: session.user.id,
    },
  });
  // 5. Revalidate caches
  revalidateTag("posts");
  revalidatePath("/blog");
  return { success: true, message: "Post created!" };
}

// components/CreatePostForm.tsx
"use client";
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { createPost } from "@/actions/post";
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Creating..." : "Create Post"}
    </button>
  );
}
export function CreatePostForm() {
  const [state, action] = useActionState(
    createPost,
    { errors: {} },
  );
  return (
    <form action={action} className="space-y-4">
      <div>
        <label htmlFor="title">Title</label>
        <input id="title" name="title" />
        {state.errors?.title && (
          <p className="text-sm text-red-500">
            {state.errors.title[0]}
          </p>
        )}
      </div>
      <div>
        <label htmlFor="content">Content</label>
        <textarea id="content" name="content" />
        {state.errors?.content && (
          <p className="text-sm text-red-500">
            {state.errors.content[0]}
          </p>
        )}
      </div>
      {state.message && !state.success && (
        <p className="text-red-500">{state.message}</p>
      )}
      {state.success && (
        <p className="text-green-600">{state.message}</p>
      )}
      <SubmitButton />
    </form>
  );
}