Including Files in Next.js API on Vercel: A Guide for Email Templates

Quick Guide:

If you're looking to include static files in your Next.js API on Vercel for use with Nodemailer (or any other purpose) similar to using included files in Netlify's .toml file, you can achieve this by using a combination of readFileSync from the fs package and path.resolve from the path package. For instance, if you have an emails folder in the root directory, with a subfolder named reset_password_email containing both an HTML and a TXT file, you can call these files like so:

Directory example:

const fs = require("fs");
const path = require("path");

const emailHTML = fs.readFileSync(
  path.resolve("./emails", "reset_password_email", "email.html"),
  "utf-8"
);

const emailTXT = fs.readFileSync(
  path.resolve("./emails", "reset_password_email", "email.txt"),
  "utf-8"
);

Now, you can use these variables in your code as needed, for example in Handlebars:

const compiledHTML = Handlebars.compile(emailHTML);
const compiledTXT = Handlebars.compile(emailTXT);

Explanation:

When working with Next.js and serverless functions on Vercel, it's important to note that static files in the root directory aren't automatically bundled with your serverless function. To access these files, you'll need to use Node.js's built-in fs module to read them.

path.resolve is used to generate the correct file path, ensuring it works both locally during development and when deployed on Vercel. It's a more robust way to construct file paths compared to manually concatenating strings.

By following this approach, you can seamlessly integrate static files like email templates into your Next.js API, enabling you to send personalized emails with ease.

Remember, always handle sensitive information like email templates with care, ensuring they are securely stored and accessed. With this technique, you have the flexibility to incorporate various types of files into your Next.js projects.

Author:
Tashyn Wallace