Send emails from NextJS
Mailik - The React email collector

If you have a NextJS App set up already you can go straight to the Integrate section

Create NextJS App

To create a nextjs app you can follow this guide: NextJS Create

Mailik

To integrate Mailik - you first need to do set up your account:

Account setup

1. Navigate to Mailik and create a free account
2. Create a project
3. Copy the public key to clipboard

Set up environment variables

Create a .env file and put NEXT_PUBLIC_MAILIK=YOUR_KEY_FROM_MAILIK

Install mailik

Then install mailik in your repository using node:

$ npm i @mailik/sdk

Create a form

Now you need to create a form for receiving emails on one of your pages (for example on the index page)

import Mailik from "@mailik/sdk";
import React, { useState } from "react";

const MainPage = () => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  if (!process.env.NEXT_PUBLIC_MAILIK) {
    throw new Error("Implement NEXT_PUBLIC_MAILIK environment variable");
  }

  // Sending function
  const send = async () => {
    if (email && message) {
      const mailikResult = await Mailik(process.env.NEXT_PUBLIC_MAILIK).send({
        body: message,
        replyTo: email,
        subject: "Form from my Website",
      });
    }
  };

  return (
    <>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button>Send</button>
    </>
  );
};

export default MainPage;

After setting this up it will send the emails to the owner of the project that you have set up in Mailik panel.