Next.js Coding Questions

Create a basic app router page.

export default function Page() {
  return <h1>Interview Prep</h1>;
}

Fetch data in a Server Component.

export default async function Page() {
  const res = await fetch("https://api.example.com/posts", { next: { revalidate: 60 } });
  const posts = await res.json();
  return <pre>{JSON.stringify(posts, null, 2)}</pre>;
}

Read params in a dynamic segment.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Return JSON from a route handler.

export async function GET() {
  return Response.json({ ok: true });
}

Mark a client component and handle click.

"use client";
export function LikeButton() {
  return <button onClick={() => console.log("liked")}>Like</button>;
}

Export dynamic metadata.

export async function generateMetadata({ params }) {
  const { slug } = await params;
  return { title: `${slug} | PHPKINGDOM` };
}

Add a loading.tsx fallback.

export default function Loading() {
  return <p>Loading...</p>;
}

Create error.tsx with reset.

"use client";
export default function Error({ reset }: { reset: () => void }) {
  return <button onClick={reset}>Try again</button>;
}

Read searchParams in a page.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  return <p>Query: {q}</p>;
}

Use next/image with sizes.

import Image from "next/image";
<Image src="/hero.jpg" alt="Hero" width={1200} height={630} sizes="100vw" />

Navigate with next/link.

import Link from "next/link";
<Link href="/interview-questions/">Interview Questions</Link>

Submit a form with a server action.

async function save(formData: FormData) {
  "use server";
  console.log(formData.get("title"));
}
export default function Page() {
  return (
    <form action={save}>
      <input name="title" />
      <button type="submit">Save</button>
    </form>
  );
}

Trigger a 404 for missing content.

import { notFound } from "next/navigation";
if (!post) notFound();

Redirect unauthenticated users in middleware.

import { NextResponse } from "next/server";
export function middleware(request) {
  if (!request.cookies.get("session")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

Stream a slow component with Suspense.

import { Suspense } from "react";
export default function Page() {
  return (
    <Suspense fallback={<p>Loading feed...</p>}>
      <Feed />
    </Suspense>
  );
}