En este artículo vamos a desarrollar una aplicación con Next JS y Nodemailer en la que enviaremos un email cada vez que un usuario envié un formulario de contacto desde nuestra app. Puedes usar los principios que aprendas en este tutorial para enviar correos de bienvenida, confirmación de suscripciones y mucho más.

Quiero mantener el artículo enfocado en NextJS y Nodemailer, es por eso que he desarrollar una aplicación lo más sencilla posible. Sin embargo, no hay límites en lo que puedes desarrollar a partir de lo que vamos a aprender hoy.

1. Preparación del Proyecto

1.1. Crear la App

La manera más sencilla de crear un proyecto de NextJS es con el comando:

Al iniciar la instalación, en tu terminal aparecerán las siguientes preguntas para instalar las dependencias necesarias para desarrollar nuestro proyecto.



Vamos a desarrollar nuestra aplicación con JavaScript, así que seleccionamos No para TypeScript.

Podemos prescindir de ESLint por esta ocasión.

Vamos a usar TailwindCss para estilizar nuestro formulario de contacto.

No queremos usar el directorio 'src'.

Si queremos usar App Router.

Y no queremos customizar el import alias.

1.2. Instalación de Nodemailer

Una vez que ha terminado la instalación de nuestro proyecto de NextJS vamos a instalar el módulo de Nodemailer con el comando:

1.3. Iniciar Servidor

Para lanzar nuestra aplicación en un servdor de desarrollo escribimos en nuestra terminal el comando:

Listo. Ya tenemos una aplicación de NextJS corriendo en el puerto 3000. Ahora podemos empezar a desarrollar nuestra aplicación.

2. Estructura del Proyecto

La estructura de nuestro proyecto es muy sencilla. En la carpeta /app vamos a crear dos carpetas: una para nuestros /components y otra para nuestra /api. Puedes referirte a la siguiente imagen para organizar la estructura de tu proyecto.

3. Forma de Suscripción

3.1. Limpiar page.js

Lo primero que tenemos que hacer es borrar el codigo del archivo page.js para poder empezar a desarrollar nuestra aplicación. Vamos a estilizar nuestro archivo page.js usando clases de tailwind css.

3.2. Subscribe.js

Es hora de crear nuestro componente Subscribe.js. Recuerda que en NextJS tenemos que usar declarar el flag "use client" cuando usamos React Hooks como useState o useRef.

Nuestra forma de suscripción solo tiene un input para que el usuario proporcione su email y un botón para enviar la forma.

Tenemos que escribir nuestra función handleChange para manejar los cambios en nuestro input y la función handleSubmit que se invocará cuando el usuario de click en el botón de suscribirse.

Enviamos el email del usuario por medio del body de nuestro request y espramos el resultado de la llamada. En este caso simplemente estamos logeando en consola tanto el resultado de response, como los posibles errores. En tu aplicación puedes manejarlo de manera diferente para lograr una mejor experiencia para el usuario.

4. Enviar Email

4.1. Nodemailer

5. Conclusión

Como puedes ver, enviar correos usando Nodemailer es muy sencillo. No por nada Nodemailer sigue siendo la opción preferida de los que usamos NodeJS. Recuerda que son tres los pasos fundamentales para enviar un correo con Nodemailer:

crear un transporter

crear objeto de opciones

enviar correo

Si te gustó este artículo te invito a que te suscribas al blog (recibiras un correo que enviamos con Nodemailer). Puedes ayudarnos a llegar a más personas compartiendo este artículo.