Newsletter Signup Modal

Building a Next.js Modal with HeroUI & Persistent UX

A 6-step flow detailing the technologies and implementation required for a professional, non-intrusive subscription modal.

01

Next.js & HeroUI Integration

The modal is built as a reusable component (e.g., `NewsletterModal.tsx`) using **Next.js** for structure and **HeroUI** for accessible base components like ``, ``, and `

02

Local Storage for Persistence

A `useEffect` hook checks `localStorage` for a `newsletter-shown` flag. If absent, a `setTimeout` (e.g., 3s delay) is used to trigger modal visibility, ensuring the popup appears only once per user.

03

Tailwind CSS Customization

Default HeroUI components are customized using **Tailwind CSS classes** (e.g., `p-6 sm:p-8`, `max-w-sm`) for improved visual design, responsive layouts, and modern aesthetics (rounded corners, shadowing).

04

Backend API Route for Data

The `handleSubscribe` function executes an asynchronous `fetch` POST request to a dedicated Next.js API route (e.g., `/api/subscribe`) to handle the email submission securely.

05

Success & Error Handling

The component manages state variables (`showAlert`, `alertType`, `alertMessage`) to display temporary, context-aware success (200 status) or danger (error status) alerts to the user.

06

Framer Motion for Polish

**Framer Motion** is integrated using `` and `` to create smooth transitions for the alert notifications, enhancing the perceived quality and user experience.