babel-plugin-transform-next-use-client

A Babel plugin that adds the "use client" directive for React components that are using client-only APIs such as useEffect and useState.

Installation

npm:

npm install babel-plugin-transform-next-use-client

yarn:

yarn add babel-plugin-transform-next-use-client

Setup

{
  plugins: ['babel-plugin-transform-next-use-client']
}

React client APIs in custom modules

If you are using React client APIs in modules that are imported into your components, you will need to specify an additional option customClientImports so the plugin will add the directive appropriately. This option accepts an array of names corresponding to the functions that use the React client APIs.

{
  plugins: [
    [
      'babel-plugin-transform-next-use-client',
      {
        customClientImports: [
          'useCustomHook'
        ]
      }
    ]
  ]
}