nextjs-build-website-responsive

What problem does it solve?

Prevents “responsive vỡ” outcomes where a Next.js website looks correct on desktop but breaks on mobile due to missing breakpoint variants, incorrect sizing, fixed widths, or improper responsive image configuration.

Core Features & Use Cases

• Breakpoint discipline (mobile-first): Enforces Tailwind breakpoint conventions (sm/md/lg/xl/2xl) so layouts progressively enhance instead of reversing at larger widths.
• Container + typography consistency: Standardizes section wrappers with consistent max-width and padding, and uses fluid font scaling to keep readability stable across devices.
• Performance-safe responsive images: Requires next/image with correct sizes policies, mandatory alt, and correct use of priority to avoid slow LCP on mobile.
• Touch-target accessibility: Guarantees interactive elements meet ≥44×44px touch target guidelines, reducing mis-taps on phones.
• Common responsive patterns: Recommends proven section structures (nav drawer, grid-to-stack, hero scale, cards, footer columns) and provides a testing checklist.

Quick Start

Use nextjs-build-website-responsive to audit the current Next.js pages and update Tailwind classes, next/image sizes, containers, and touch targets until the site matches mobile-first conventions.