Does use-nemo work with Next.js?

Not directly. use-nemo is a Vite plugin, and Next.js uses Webpack or Turbopack. For Next.js, use native directives or create Higher-Order Components.

Can you use multiple directives in the same file?

Yes. Each directive is processed independently. You can combine multiple directives in the same component.

Does injected code impact performance?

Injection happens at build time (0 overhead). But injected code runs at runtime, so avoid heavy operations.

use-nemo: Create Your Own React Directives Like "use client"

If you've worked with React 18+ and Next.js, you know the directives"use client" and"use server". These magic annotations at the beginning of a file trigger specific behaviors at build time.

But what if you could create your own directives? That's exactly what use-nemo offers, a Vite plugin created by Adem Kouki that opens up a world of possibilities for automating and standardizing recurring patterns in your React projects.

1. The Concept: Custom Directives at Build Time

🎯 The Brilliant Idea

use-nemo intercepts your source code during the Vite build and looks for patterns like "use xxx". When it finds one, it executes a custom handler that can:

→Inject code automatically (logs, analytics, tracking)
→Add imports as needed
→Transform code according to your business rules
→Document with automatic comments

Example: A "use analytics" directive

// src/components/CheckoutPage.tsx
"use analytics";

export function CheckoutPage() {
  return <div>Checkout...</div>;
}

// 🔮 At build time, use-nemo automatically injects:
// - Page view tracking
// - E-commerce events
// - Performance monitoring

2. Installation and Configuration

Prerequisites

• Vite + React project (TypeScript recommended)
• Node.js 18+
• Vite 5.x or higher

Installation

npm install use-nemo

# or with pnpm
pnpm add use-nemo

vite.config.ts Configuration

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import customDirectives from 'use-nemo';

export default defineConfig({
  plugins: [
    customDirectives(), // ← Add BEFORE react()
    react()
  ],
});

3. Create Your First Directive

Let's create a "use debug"directive that automatically injects development logs into your components.

src/directives/useDebug.ts

import { directiveRegistry, injectCode } from 'use-nemo';
import type { DirectiveHandler } from 'use-nemo';

const useDebugDirective: DirectiveHandler = {
  name: 'debug', // → "use debug"
  handler({ code, id }) {
    console.log(`[useDebug] Processing: ${id}`);
    
    return injectCode(code, () => {
      console.log('🐛 [DEBUG] Component mounted:', 
        window.location.pathname);
      console.log('🐛 [DEBUG] Timestamp:', 
        new Date().toISOString());
    });
  },
};

directiveRegistry.register(useDebugDirective);

Usage in a component

// src/components/Dashboard.tsx
"use debug";

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Debug code is automatically injected */}
    </div>
  );
}

💡 VOID Insight

Injection happens at build time, not runtime. This means you can condition injection based on process.env.NODE_ENV to only include debug code in development.

4. Advanced Enterprise Use Cases

Beyond playful examples, use-nemo opens up interesting possibilities for standardizing patterns in enterprise projects.

📊

"use analytics"

Automatically inject Google Analytics, Mixpanel or Segment tracking into your key pages without polluting your business code.

• Automatic page views
• E-commerce events
• User properties

🚩

"use feature-flag"

Condition code inclusion based on feature flags defined at build time (LaunchDarkly, Unleash, etc.).

• A/B testing
• Progressive rollout
• Dead code automatically removed

🔒

"use auth-guard"

Automatically inject authentication checks and redirects for protected pages.

• Session verification
• Automatic redirect
• Access logging

⚡

"use performance"

Inject performance monitoring (Web Vitals, Sentry, Datadog) into your critical components.

• LCP, FID, CLS tracking
• Error boundaries
• Render profiling

5. API and Available Helpers

Helper	Description	Usage
injectCode()	Injects executable code	Logs, tracking, side effects
injectImport()	Adds an import at the top of the file	Automatic dependencies
injectComment()	Adds a comment	Documentation, warnings

DirectiveHandler Interface

interface DirectiveHandler {
  name: string; // Without the "use" prefix
  handler(context: DirectiveContext): string | null;
}

interface DirectiveContext {
  code: string;      // File source code
  id: string;        // File path
  directiveName: string; // Directive name
}

6. Limitations and Considerations

✓ Strengths

• Simple and intuitive API
• Build time injection (no runtime overhead)
• Native TypeScript
• Infinitely extensible
• Perfect for standardizing patterns

⚠ Current Limitations

• Vite only (no Webpack/Turbopack support)
• Recent project (79 GitHub stars)
• Minimal documentation
• No native Next.js support
• Complex transformation debugging

🎯 VOID Recommendation

use-nemo is ideal for internal Vite projects where you control the stack and want to standardize cross-cutting patterns (analytics, logging, feature flags). For Next.js projects, Server Actions and native conventions remain more appropriate.

7. Conclusion: A Niche But Powerful Tool

use-nemo perfectly illustrates the JavaScript ecosystem philosophy: if a pattern is missing, create it. Born from a meme (the famous "use nemo" 🐟), this library offers an elegant solution for extending React's directive system.

For teams working on Vite projects with recurring code injection needs (analytics, monitoring, feature flags), use-nemo can significantly reduce boilerplate and improve codebase consistency.

Resources

Frequently Asked Questions

Does use-nemo work with Next.js?: Not directly. use-nemo is a Vite plugin, and Next.js uses Webpack or Turbopack. For Next.js, use native directives ("use client", "use server") or create Higher-Order Components.
Can you use multiple directives in the same file?: Yes. Each directive is processed independently. You can combine "use debug" and "use analytics" in the same component.
Does injected code impact performance?: It depends on what you inject. The injection itself happens at build time (0 overhead). But injected code runs at runtime, so avoid heavy operations.
How to debug transformations?: Add console.log statements in your handler to see transformations during build. You can also inspect generated files in the.vite or dist folder.

Back to publications