This plugin allows the use of @fluentui/react-components and @griffel in the new NextJS@14 appDir router. The goal of this plugin is to add the "use client"; directive to all files in @fluentui/react-components and @griffel, but note it's not limited to these libraries.

# yarn
yarn add fluentui-next-appdir-directive

# npm
npm i fluentui-next-appdir-directive

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [
      ["fluentui-next-appdir-directive",{
         paths: [
          "@griffel",
          "@fluentui"
          // 👇 you can add another dependency that needs the directive
          "your dependency name"
        ]
      }],
    ],
  },
};

module.exports = nextConfig;

// .swcrc
{
  "jsc": {
    "experimental": {
      "plugins": [
        ["fluentui-next-appdir-directive", {
          "paths": [
            "@griffel",
            "@fluentui"
             // 👇 you can add another dependency that needs the directive
             "your dependency name"
          ]
        }]
      ]
    }
  }
}

Note: strings inside paths should only contain the scope/package name, in our case @fluentui/react-components -> @fluentui