Subscribe Newsletter
A comprehensive, full-stack newsletter management system with subscriber management, campaign creation, email automation, and admin dashboard integration for Next.js applications.
Newsletter Subscription System
A powerful, enterprise-grade newsletter management system that combines elegant user interfaces with robust backend functionality. Features automated email campaigns, subscriber management, unsubscribe handling, and comprehensive admin controls with real-time analytics.

The component includes complete database models for subscribers, campaigns, and recipient tracking. All email templates and unsubscribe flows are pre-configured and ready to use.
Features
Rich Email Campaigns
HTML email support with professional templates.
Secure Unsubscribe Flow
Token-based unsubscribe with confirmation.
Real-time Analytics
Track opens, clicks, and subscriber engagement.
Batch Email Processing
Efficient bulk email sending with rate limiting.
Admin Dashboard
Comprehensive management interface.
Installation
Database Setup
Set up the database schema with Prisma. Add this to your schema.prisma
file:
Make sure to configure your email provider settings before testing. Use app-specific passwords for Gmail.
Libraries Used
This component leverages several modern libraries and frameworks:
- Next.js 14+: App Router with Server Actions
- React Hook Form: Form state management and validation
- Zod: Schema validation for both client and server
- Prisma: Database ORM for PostgreSQL
- Nodemailer: Email sending functionality
- Lucide React: Modern icon library
- date-fns: Date formatting utilities
- Tailwind CSS: Utility-first CSS framework
Usage
Add the newsletter subscription form to any page:
The component automatically handles:
- Form validation and submission
- Duplicate email detection
- Confirmation email sending
- Success/error state management
- Responsive design
Subscription Management
The system intelligently handles various subscription scenarios:
Features include:
- Duplicate Prevention: Prevents multiple subscriptions with same email
- Secure Tokens: Cryptographically secure unsubscribe tokens
- Status Tracking: Active, unsubscribed, and pending states
Server Actions
Features:
- Zod validation for type safety
- Secure token generation
- Automatic confirmation emails
- Error handling and user feedback
API Reference
Server Actions
Prop | Type | Default |
---|---|---|
subscribeToNewsletter | (prevState: SubscribeFormState, formData: FormData) => Promise<SubscribeFormState> | - |
createAndSendCampaign | (prevState: CampaignFormState, formData: FormData) => Promise<CampaignFormState> | - |
unsubscribeByToken | (token: string) => Promise<{ success: boolean; message: string }> | - |
getAllSubscribers | () => Promise<NewsletterSubscriber[]> | - |
getAllCampaigns | () => Promise<NewsletterCampaign[]> | - |
deleteSubscriber | (id: string) => Promise<{ success: boolean; error?: string }> | - |
verifyUnsubscribeToken | (token: string) => Promise<string | null> | - |
Conclusion
This newsletter subscription provides a complete solution for managing email campaigns, subscribers, and analytics. With its robust backend, elegant UI components, and seamless integration with Next.js, it empowers developers to build powerful newsletter features quickly and efficiently.