Next.js Interview Questions and Answers: 60 Questions from Easy to Hard

// One fetch: refresh at most every 10 minutes
const res = await fetch("https://api.example.com/jobs", {
  next: { revalidate: 600 },
});

// Whole route segment (page.tsx or layout.tsx)
export const revalidate = 600;

// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";

export async function POST(request: Request) {
  const secret = request.headers.get("x-webhook-secret");
  if (secret !== process.env.CMS_WEBHOOK_SECRET) {
    return Response.json({ ok: false }, { status: 401 });
  }
  revalidateTag("jobs");
  return Response.json({ ok: true });
}

// where the data is read:
// fetch(url, { next: { tags: ["jobs"] } })

// app/jobs/in/[city]/page.tsx
export async function generateStaticParams() {
  const cities = await getTopCities(20);
  return cities.map((c) => ({ city: c.slug }));
}

export const dynamicParams = true; // the default
export const revalidate = 3600;    // refresh hourly

// app/dashboard/page.tsx (Next.js 15)
import { cookies } from "next/headers";

export default async function Dashboard() {
  const cookieStore = await cookies(); // makes the route dynamic
  const city = cookieStore.get("city")?.value ?? "Delhi";
  return <p>Jobs near {city}</p>;
}

import { Suspense } from "react";

export default async function JobPage({ params }) {
  const { id } = await params;
  return (
    <main>
      <JobHeader id={id} />
      <Suspense fallback={<p>Loading similar jobs...</p>}>
        <SimilarJobs id={id} />
      </Suspense>
    </main>
  );
}

export default async function Profile({ params }) {
  const { id } = await params;
  // Both requests start at the same time
  const [candidate, applications] = await Promise.all([
    getCandidate(id),
    getApplications(id),
  ]);
  return <ProfileView c={candidate} apps={applications} />;
}

"use client";
import { useActionState } from "react";
import { applyForJob } from "./actions"; // a "use server" file

export function ApplyForm({ jobId }: { jobId: string }) {
  const [state, formAction, pending] = useActionState(
    applyForJob,
    { message: "" }
  );
  return (
    <form action={formAction}>
      <input type="hidden" name="jobId" value={jobId} />
      <input name="mobile" inputMode="numeric" required />
      <button disabled={pending}>Apply</button>
      <p aria-live="polite">{state.message}</p>
    </form>
  );
}

"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createJob(formData: FormData) {
  const employer = await requireEmployer();
  let id: number;
  try {
    id = await insertJob(employer.orgId, formData);
  } catch {
    return { error: "Could not save the job." };
  }
  revalidatePath("/jobs");
  redirect(`/jobs/${id}`); // outside try/catch
}

// middleware.ts
import { NextResponse, type NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  if (!request.cookies.has("session")) {
    const url = new URL("/login", request.url);
    url.searchParams.set("next", request.nextUrl.pathname);
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*", "/account/:path*"],
};

// app/jobs/page.tsx - Server Component
import FilterDrawer from "./FilterDrawer"; // "use client"
import JobFilters from "./JobFilters";     // Server Component

export default function JobsPage() {
  return (
    <FilterDrawer>
      <JobFilters />
    </FilterDrawer>
  );
}

"use client";
import { useEffect, useState } from "react";

export function PostedAgo({ postedAt }: { postedAt: string }) {
  const [label, setLabel] = useState("");
  useEffect(() => {
    // Date.now() differs between server and browser,
    // so compute it only after hydration
    const ms = Date.now() - new Date(postedAt).getTime();
    setLabel(Math.floor(ms / 86400000) + " days ago");
  }, [postedAt]);
  return <span>{label}</span>;
}

// app/search/page.tsx (Next.js 15)
type Search = { q?: string; page?: string };

export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<Search>;
}) {
  const { q = "", page = "1" } = await searchParams;
  const results = await searchJobs(q, Number(page) || 1);
  return <Results items={results} />;
}

// app/jobs/[id]/page.tsx (Next.js 15)
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const job = await getJob(id); // wrapped in React cache()
  return {
    title: `${job.title} in ${job.city}`,
    description: job.summary.slice(0, 155),
    alternates: { canonical: `/jobs/${id}` },
  };
}

// next.config.js
module.exports = { output: "standalone" };

# Dockerfile, final stage (after npm run build)
WORKDIR /app
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public
ENV PORT=3000 HOSTNAME=0.0.0.0
CMD ["node", "server.js"]