next-twin.js

const path = require("path");
const { NextConfig } = require("next");

module.exports = function withTwin() {
  return (nextConfig) => {
    return {
      ...nextConfig,

      webpack(config, options) {
        const { dev } = options;

        // replace your directories
        const componentsDir = path.resolve(__dirname, "_includes");
        const pagesDir = path.resolve(__dirname, "pages");
        const layoutDir = path.resolve(__dirname, "_layout");

        config.module = config.module || {};
        config.module.rules = config.module.rules || [];
        config.module.rules.push({
          test: /\.(tsx|jsx)$/,
          include: [componentsDir, pagesDir, layoutDir],
          use: [
            options.defaultLoaders.babel,
            {
              loader: "babel-loader",
              options: {
                sourceMaps: dev,
                plugins: [
                  [
                    require.resolve("babel-plugin-macros"),
                    {
                      twin: {
                        perest: "emotion",
                      },
                    },
                  ],
                  [
                    require.resolve("@babel/plugin-syntax-typescript"),
                    { isTSX: true },
                  ],
                ],
              },
            },
          ],
        });

        if (typeof nextConfig.webpack === "function") {
          return nextConfig.webpack(config, options);
        } else {
          return config;
        }
      },
    };
  };
};