nextjs-app-router-patterns

Components in the app directory are Server Components by default, so you can fetch data directly with async/await without useEffect. Add the 'use client' directive only when you need hooks, event handlers, or browser APIs.

Use the native fetch API with cache options: 'no-store' for fresh data, 'force-cache' for static data, or next.revalidate for ISR. Tag fetches with next.tags and invalidate them from Server Actions using revalidateTag.

Server Actions are functions marked with 'use server' that handle mutations directly from components with progressive enhancement. Route handlers in route.ts files expose REST endpoints for external clients and third-party integrations.

No, React hooks like useState and useEffect are not allowed in Server Components. Move interactive logic into a separate component marked with 'use client' and pass serializable props from the Server Component.

Create a @modal slot in your layout and add an intercepting route like @modal/(.)photos/[id]/page.tsx that renders the content inside a modal. The full page route still exists for direct navigation and refreshes.

Streaming only works when the slow data fetch happens inside a component wrapped in a Suspense boundary, not in the parent page. Move the await call into the child component and provide a fallback skeleton.