Using component libraries with app directory in nextjs 13

Question

When working with the app directory in nextJS 13, all client components must have a "use client" directive. But most components from popular react libraries will not have this directive.

The solution I found was to create a file that imports that component and exports it with the "use client" directive, but we need to rename each component to make it accessible via vs code auto import extension.

But is there a better way of using a component library in nextjs without the need to do that?

Answer 1

The answer I give to this question here solves this problem:

Server components: Can we use webpack to add "use client" in modules from compponent library?

Mainly you just use webpack to add the "use client" directive in each component of some UI library.

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: function (config, options) {
    config.module.rules.push({
      test: [/node_modules[\\/]primereact[\\/.].*\.js$/], /// replace here make match your package
      loader: require.resolve("./loaders/use-client-loader.js"),
    });
    return config;
  },
};