dev-nextjs

Next.js App Router

App Router vs Pages Router

App Router (default since Next 13, stable): app/ folder, Server Components by default, Server Actions, streaming. Prefer for any new project.

Pages Router: pages/ folder, getServerSideProps/getStaticProps. Legacy, do not add new routes there.

If the project has both, coexist — both can live together, but do not duplicate a route.

Server Components by default

Any component in app/ is a Server Component by default. It runs on the server, zero client JS.

// app/posts/page.tsx — Server Component (default)
export default async function PostsPage() {
  const posts = await db.posts.findMany();  // Direct SQL OK
  return <PostList posts={posts} />;
}

Switch to Client Component with "use client"

// app/components/SearchBox.tsx
"use client";  // Directive at the top of the file

import { useState } from "react";

export function SearchBox() {
  const [query, setQuery] = useState("");
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

Rule: "use client" only if you need hooks (useState, useEffect) or browser events (onClick, onChange). Otherwise, stay Server Component.

Server/Client composition

Server Components can import Client Components, but the reverse is not allowed (except via children props).

// OK: Server Component uses a Client Component
export default async function Page() {
  const data = await fetch(...);
  return <ClientChart data={data} />;  // ClientChart is "use client"
}

// OK: Client Component receives a Server Component via children
"use client";
export function Layout({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;  // children can be a RSC
}

Data Fetching

Native fetch() with Next.js cache

// Forced cache (SSG-like, manual revalidation)
const data = await fetch(url, { cache: "force-cache" });

// No cache (SSR on every request)
const data = await fetch(url, { cache: "no-store" });

// Time-based revalidation (ISR)
const data = await fetch(url, { next: { revalidate: 60 } });

// Tag-based revalidation
const data = await fetch(url, { next: { tags: ["posts"] } });
// Then in a Server Action: revalidateTag("posts")