agency-nextjs-website

Place route folders in src/app, shared primitives in src/components, and copy in src/lib/content.ts. Keep route files small by composing sections, and use Server Components by default, adding "use client" only where browser APIs or animation libraries require it.

Wrap animations in GSAP contexts and revert them on unmount. Every timeline, ScrollTrigger, observer, and requestAnimationFrame loop must be stopped during cleanup, and breakpoint-specific motion should use gsap.matchMedia().

Target LCP at or under 2.5s, INP at or under 200ms, and CLS at or under 0.1 in field data. Also verify the production build passes, lazy-load heavy assets, and test the mobile viewport on real devices.

Default to Server Components for new projects. Add "use client" only where browser APIs, animation libraries, event handlers, or local state are required, keeping the client boundary as small as possible.

Use Server Actions or route handlers for submissions and always validate on the server. Include loading, success, and recoverable error states, plus spam protection such as a honeypot, rate limit, or Turnstile before launch.

Avoid scroll-scrubbing and full-screen repaint effects on mobile, where they cause jank and battery drain. Give mobile simpler motion, fewer layers, and lower DPR using gsap.matchMedia() or route-specific gates.