dev-nextjslisted

# 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. ```tsx // 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"` ```tsx // 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). ```tsx // OK: Server Component uses a Client Component export default async function Page() { const data = await fetch(...);