next-mjml

next-mjml

next-mjml is a Node.js package designed to enable Next.js to understand how to import MJML (markup language for responsive email) files. This plugin adds the ability to load MJML files in a similar fashion to how images are loaded, but instead of a file path, it returns a parsed HTML string. The package depends on mjml.

Installation

To install next-mjml and its dependencies, use npm or yarn:

npm install next-mjml mjml

or

yarn add next-mjml mjml

Usage

• Create or open your next.config.js file.

• Import next-mjml at the beginning of the file:

const { withMJML } = require('next-mjml');

• Define any MJML options you want to customize (optional):

const mjmlOptions = {
  // Add your MJML options here as key-value pairs
  minify: true,
  beautify: false,
  // ...
};

• Use the withMJML function and pass in the mjmlOptions object as an argument:

module.exports = withMJML(mjmlOptions)({
  // Your Next.js configuration options go here
});

Example

Here's an example of how to use next-mjml in your Next.js project:

• Create an MJML file named email.mjml in the root of your project:

<!-- email.mjml -->
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

• Import and use the MJML file:

// pages/api/user.js
...
import mailer from "..."
import email from './email.mjml'; // Use the mjml file as a regular import
...

export default handler(req, res) {
    if (req.method === 'POST') {
        mailer.sendEmail(email, "[e-mail]");
    }
    ...
}

MJML Options

The mjmlOptions object allows you to customize the MJML compilation process according to your specific needs. You can refer to the official mjml documentation to explore the available options and their usage.

Important Note: Be cautious when using mjmlOptions and make sure the options are compatible with the version of mjml installed in your project.

Credits

This package was inspired by the need to seamlessly integrate MJML files into Next.js projects, allowing developers to work with responsive email templates more efficiently.

If you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the GitHub repository.

License

next-mjml is open-source software licensed under the MIT license.