Skip to main content

Next.js

First, check what version of Next.js you are using​

Look in your package.json file for the version of next.

Next.js 13.4.19 and above: install SWC plugin​

  1. Install our SWC plugin.

    npm install --save-dev @mightymeld/swc-plugin@VERSION

    Where VERSION is one of next-13, next-14.1, or next-14.2, depending on your version of Next.js.

  2. Create a next.config.js at the top of your app.

/** @type {import('next').NextConfig} */
const nextConfig = {};

if (process.env.MIGHTYMELD) {
  const { options } = require('@mightymeld/swc-plugin/options');
  nextConfig.experimental = {
    swcPlugins: [['@mightymeld/swc-plugin', options()]]
  };
}

module.exports = nextConfig;

Next.js 13.4.18 and below: install Babel plugin​

These versions of Next.js are not compatible with our SWC plugin. You can use our Babel plugin instead.

Warning

Using the Babel plugin is not compatible with the popular @next/font package. If you are using @next/font, we recommend upgrading Next.js so you can use the SWC plugin instead.

Because of the way Next.js bundles Babel, first we'll need to add the @babel/types package.

  1. Install our runtime package and the @babel/types package.

npm install --save-dev mightymeld @babel/types

  1. Next, create a babel.config.js at the top of your app. Once this file exists, Next.js will use it as the source or truth for Babel, so it needs to define what Next.js needs as well, which is the next/babel preset.
// Base config needed by Next.js
const babel = {
  presets: ['next/babel']
};

if (process.env.MIGHTYMELD) {
  babel.plugins = ['mightymeld/babel-plugin-mightymeld'];
}

module.exports = babel;

If you already have a babel.config.js, see the “other Frameworks” instructions for help extending your config file.