nextjs-expert

Hydration errors occur when server-rendered HTML differs from client rendering. Find browser API usage like window or localStorage in Server Components, then wrap those calls in typeof window checks or move the logic into Client Components marked with 'use client'.

This error means a React hook is used in a Server Component. Add the 'use client' directive at the top of that component file, or better, extract the interactive part into a leaf-level Client Component to keep the rest server-rendered.

Next.js caches fetch requests aggressively by default. Add cache: 'no-store' to the fetch options for dynamic data, or configure a revalidate value to use Incremental Static Regeneration with timed updates.

No, getServerSideProps is a Pages Router API and does not work in the App Router. Migrate by fetching data directly inside async Server Components and using Route Handlers instead of pages/api routes.

generateStaticParams must return an array of objects whose keys match the dynamic segment names. Verify the return format, check file naming conventions like [slug], and inspect the build output for generated static paths.

Use next/image with explicit dimensions and priority for above-fold images, apply next/font for font optimization, and reduce Client Component usage to shrink the JavaScript bundle. Validate improvements with Lighthouse audits.