Next.js

Install and configure reactuse for Next.js.

Create project

Create a new Next.js app or use an existing one:

npm

npm create next-app@latest

yarn

yarn create next-app

pnpm

pnpm create next-app

bun

bun create next-app

Edit tsconfig.json file

Add baseUrl and paths so the CLI and imports resolve correctly. Use "./*" if the app lives in the project root, or "./src/*" if you use a src directory:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Run the CLI

Run the useverse init command to set up your project:

npx useverse@latest init

This creates a reactuse.json config file in your project.

Add hooks

Add hooks with the CLI:

npx useverse@latest add useBoolean

Then import and use the hook (e.g. in app/page.tsx). Use 'use client' when the component uses hooks:

'use client';

import { useBoolean } from '@/shared/hooks';

const Home = () => {
  const [on, toggle] = useBoolean();

  return (
    <div>
      <button onClick={() => toggle()}>Click me</button>
      <p>{on.toString()}</p>
    </div>
  );
};

export default Home;