Next.js contact form with nodemailer, React Hook Form, Zod, Tailwind CSS, reCAPTCHA, Handlebars with TypeScript

This is a template for a contact form with Next.js. It uses a custom server to send the email and validate the form. It also uses reCAPTCHA to prevent spam. Handlebars is used to create the email template.

For app router with server actions visit https://github.com/ozcancelik/nextjs-14-mail-form repository.

Demo

https://nextjs-mail-form-ozcancelik.vercel.app/

Features

• Next.js
• Custom server: You can run with different port. It's useful for same server with other apps.
• Nodemailer
• React Hook Form
• Zod
• reCAPTCHA with react-google-recaptcha It uses the invisible reCAPTCHA v2. More info about reCAPTCHA: https://developers.google.com/recaptcha/docs/display
• Email templating with Handlebars. https://github.com/yads/nodemailer-express-handlebars
• TypeScript
• CSS with Tailwind CSS
• Icons with React Icons

How to use

### Prerequisites

• Clone the repository and install the dependencies.
• Create a .env file or change the name of .env.example to .env and fill the variables.

SERVER_PORT=
CONTACT_FORM_SEND_EMAIL=
CONTACT_FORM_RECEIVE_EMAIL=
CONTACT_FORM_PASS=
CONTACT_FORM_HOST=
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=

Install dependencies

npm install
# or
yarn

### Run the development server:

npm run dev
# or
yarn dev

### Build the app

npm run build
# or
yarn build

### Run the production server:

npm run start
# or
yarn start

Notes

• You can change the server port in .env file. If empty, it will use the default port 3000.
• If you have problems with Nodemailer, you can try to change the port or other settings. You can find more info in the Nodemailer documentation. More info: https://nodemailer.com/smtp/
• Gmail requires you to enable "Less secure app access" in your account settings. More info: https://nodemailer.com/usage/using-gmail/
• For the reCAPTCHA to work, you need to add the domain to the reCAPTCHA admin panel.

Tested with Node.js v18.12.1.