Skip to content
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) => {
      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 (
      <my-component onClick={() => console.log("clicked")}>