I'm trying to design a system with Next.js that dynamically imports plugins from a directory. I've gotten almost everything working except for one part: the plugins render as server components. The architecture of this system is kind of a mess, but I'll try and break it down as simply as I can.

The custom server loads the plugins, registers the API routes for the plugins, then passes the rest to Next.js.

The plugin manager is a statically exported instance of a class. It has one method relevant to my issue:

public _PluginManager {
  public getSidebar (plugin): FC {
    return this.plugins[plugin].getSidebar();
  }
}

const PluginManager = new _PluginManager();
export default PluginManager;

This getSidebar method is implemented in a plugin class found in the plugins code:

import Sidebar from "./client/Sidebar";

public TextPlugin implements IPlugin {
  public getSidebar() {
    return Sidebar;
  }
}

And the sidebar has a "use client" directive at the top.
It also has this line within the component:

console.log(typeof window === "undefined" : "server" : "client");

The component imports and renders correctly, however it is rendering as a server component and I can't find a way to bypass this behavior. I was wondering if anybody else had any experience or any references to a dynamic plugin system implemented with Next.js.