babel-plugin-transform-next-use-client

{ // In your babel.config.js or .babelrc file "presets": [ // ... other presets like '@babel/preset-env', '@babel/preset-react', 'next/babel' ], "plugins": [ // ... other plugins 'babel-plugin-transform-next-use-client', // If you have custom client-only hooks or modules, specify them: // [ // 'babel-plugin-transform-next-use-client', // { // customClientImports: [ // 'useAuthClientStore', // Example: a custom hook that uses browser APIs // 'myClientSideUtility' // ] // } // ] ] } // Example React component that would trigger the plugin: // components/MyClientComponent.tsx // (No need for manual 'use client' here if plugin is active) import React, { useState, useEffect } from 'react'; interface MyClientComponentProps { initialCount?: number; } export default function MyClientComponent({ initialCount = 0 }: MyClientComponentProps) { const [count, setCount] = useState(initialCount); useEffect(() => { // This effect runs only on the client console.log('Component mounted on client'); document.title = `Count: ${count}`; return () => { console.log('Component unmounted from client'); }; }, [count]); return ( <div> <h1>Client Component Example</h1> <p>Current count: {count}</p> <button onClick={() => setCount(prev => prev + 1)}>Increment</button> <p>This component uses `useState` and `useEffect`, triggering the 'use client' directive automatically.</p> </div> ); }