{"id":21846568,"url":"https://github.com/jperez00/resend-email-template","last_synced_at":"2025-06-22T15:37:19.113Z","repository":{"id":253486947,"uuid":"843250011","full_name":"JPerez00/resend-email-template","owner":"JPerez00","description":"A Simple Next.js, TypeScript \u0026 Tailwind CSS contact form template that uses the Resend API. Built with React-Hook-Forms, validated with Zod, handles submissions with server actions, and shows toast notifications using Sonner.","archived":false,"fork":false,"pushed_at":"2025-04-14T01:36:32.000Z","size":939,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T02:26:10.415Z","etag":null,"topics":["form","headlessui","nextjs","react-email","react-hook-forms","resend","sonner","tailwindcss","typescript","zod-validation"],"latest_commit_sha":null,"homepage":"https://resend-email-template.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JPerez00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-16T05:20:00.000Z","updated_at":"2025-04-14T01:36:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0f52250-3e4c-4862-bc89-3d48eba18050","html_url":"https://github.com/JPerez00/resend-email-template","commit_stats":null,"previous_names":["jperez00/resend-email-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JPerez00/resend-email-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JPerez00%2Fresend-email-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JPerez00%2Fresend-email-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JPerez00%2Fresend-email-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JPerez00%2Fresend-email-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JPerez00","download_url":"https://codeload.github.com/JPerez00/resend-email-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JPerez00%2Fresend-email-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261316013,"owners_count":23140380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","headlessui","nextjs","react-email","react-hook-forms","resend","sonner","tailwindcss","typescript","zod-validation"],"created_at":"2024-11-27T23:14:28.192Z","updated_at":"2025-06-22T15:37:14.092Z","avatar_url":"https://github.com/JPerez00.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Resend Contact Form Template\n\n![Image](/public/resend-hero-image.png)\n\nA Simple [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/) \u0026 [Tailwind CSS](https://tailwindcss.com/) contact form template that uses the [Resend API](https://resend.com/). Styled with React-Email and built with React-Hook-Forms, validated with Zod, handles submissions with server actions, and shows toast notifications using Sonner.\n\n## Live Demo:\n\n[https://resend-email-template.vercel.app/](https://resend-email-template.vercel.app/)\n\n\n## Main Features:\n\n- Resend Email API\n- Form built with [React-Hook-Forms](https://react-hook-form.com/)\n- Styled with [React-Email](https://react.email/)\n- Email validation With [Zod](https://zodjs.netlify.app/)\n- Dialog Toast Notification With [Sonner](https://sonner.emilkowal.ski/)\n\n## Prerequisites:\n\nThis template requires a Resend API key and a verified domain name. Follow the instructions below to set this up:\n\n- [Create an API key](https://resend.com/api-keys)\n- [Verify your domain](https://resend.com/domains)\n\n## Clone \u0026 Run Locally\n\nFirst, execute create-next-app with npx to bootstrap the example:\n\n```bash\nnpx create-next-app --example https://github.com/JPerez00/resend-email-template your-project-name-here\n```\n\nCreate a `.env.local` file in the root directory of your project and add your Resend API key:\n\n```bash\nRESEND_API_KEY=your_resend_api_key_here\nEMAIL_FROM=\"Your Website Name \u003cnoreply@your-domain.com\u003e\"\nEMAIL_TO=your_destination_email@example.com\n```\n\nThen run the development server:\n\n```bash\nnpm run dev\n```\n\n## Clone \u0026 Deploy\n\nWhen deploying the project to Vercel, add the same environment variable to your Vercel project.\n\nNavigate to your Vercel dashboard, select your project, go to the \"Settings\" tab, and then to \"Environment Variables.\" This ensures the API key and emails are securely accessible both locally and in the deployed environment.\n\n```bash\nRESEND_API_KEY=your_resend_api_key_here\nEMAIL_FROM=Your Website Name \u003cnoreply@your-domain.com\u003e\nEMAIL_TO=your_destination_email@example.com\n```\n\n#### Note:\n\nInclude the `\"\"` in the `.env.local` file, but do not include the `\"\"` in the `Vercel Environment Variables`, see example below:\n\n![Image](/public/resend-env-2.png)\n\n## Start Editing\n\nTo set up your emails, just add your Resend API key, a verified domain name, and your source and destination emails:\n\nPreviously, you had to manually edit the `from` and `to` addresses in the `app/actions.ts` file, like this:\n\n```bash\n// Make sure it matches the registered domain on Resend.com\nfrom: 'Your Website Name \u003cnoreply@your-domain.com\u003e',\n// Your desired destination email here.\nto: ['your@email.com'], \n```\n\nNow, you can simply update these in your `.env.local` file or Vercel Variables when deploying. Your `app/actions.ts` file will now use:\n\n```bash\nfrom: process.env.EMAIL_FROM as string, // Fetch \"from\" email from environment variables\nto: [process.env.EMAIL_TO as string],    // Fetch \"to\" email from environment variables\n```\n\nFor more details on how I built this, check the blog post on my [website](https://www.jorge-perez.dev/blog/resend-contact-form)\n\n## Font\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjperez00%2Fresend-email-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjperez00%2Fresend-email-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjperez00%2Fresend-email-template/lists"}