This is a Next.js project using the App Router and TypeScript.
- Node.js 18.x or later
- pnpm 8.x or later (Installation guide)
- A Resend API key (Sign up here)
- Install dependencies:
pnpm install- Set up your environment variables:
Create a .env.local file in the root directory with the following variables:
# Email Configuration
RESEND_API_KEY=your_resend_api_key_here
[email protected]
[email protected]- Sign up for a Resend account at resend.com
- Once logged in, navigate to the API Keys section
- Create a new API key with the following permissions:
emails.send- Required for sending emailsdomains.read- Required for domain verification
- Copy the generated API key and add it to your
.env.localfile - Verify your sender email domain in the Resend dashboard:
- Go to Domains
- Add your domain
- Follow the DNS verification steps
- Wait for domain verification to complete
Note: Make sure to verify your sender email domain with Resend before using it. The verification process may take up to 48 hours.
- Run the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result.
- Modern, responsive design
- Contact form with email notifications
- Rate limiting (5 messages per hour)
- Form validation
- TypeScript for type safety
| Variable | Description | Required |
|---|---|---|
RESEND_API_KEY |
Your Resend API key | Yes |
CONTACT_EMAIL |
Email address where contact form submissions will be sent | Yes |
SENDER_EMAIL |
Verified email address that will be used to send emails | Yes |
To learn more about the technologies used in this project:
- Next.js Documentation - learn about Next.js features and API
- Resend Documentation - learn about Resend email API
- TypeScript Documentation - learn about TypeScript
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
When deploying, make sure to add the required environment variables in your Vercel project settings.