485

Next.js

PreviousNext

Install and configure reactuse for Next.js.

Create project

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

npx create-next-app@latest my-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": {
    "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:

app/page.tsx
'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;