On this page

Use with Next.js

Example Project

See also: Use With React

Macaron components can be used with the Next.js framework.

Configure `next.config.js`

Macaron has a webpack loader to load its files as JavaScript modules.

Configure next.config.js to use the loader:

const nextConfig = {
  // ...

  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.macaron/,
      use: [options.defaultLoaders.babel, "@macaron-elements/loader-webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

Use Macaron components in Next.js pages

import "../components/components.macaron";

export default function Home() {
  return (
    <div>
      <my-component onClick={() => console.log("clicked")}>
        Content
      </my-component>
    </div>
  );
}