@Fluent UI v9 NextJS AppDir router support plugin

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.

Installation

# yarn
yarn add fluentui-next-appdir-directive

# npm
npm i fluentui-next-appdir-directive

Configuration for @fluentui/react-components and @griffel:

// 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;

Configuration for usage outside of NextJS

// .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

My modules are getting ignored and gives me an error in NextJS 14.1.1+:

// 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"
        ]
      }],
    ],
  },
  // 👇 packages that need the directive
  transpilePackages: ["@fluentui/react-components"]
};

module.exports = nextConfig;

My packages aren't getting tree-shaken

This is a known issue of using this directive, one way to get around it is to optimizePackage/modularizeImports imports:

• https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports
• https://nextjs.org/docs/architecture/nextjs-compiler#modularize-imports