Next.js onClick Handlers: App & Pages Router

January 20, 2024

Next.js onClick Handlers: The Ultimate Guide

If you've just moved to the Next.js App Router and your buttons are throwing errors like "Event handlers cannot be passed to Client Component props," you aren't alone.

Handling

onClick

in Next.js has changed. This guide will show you the modern way to handle interactivity while keeping your app fast and SEO-friendly.

[FREE DOWNLOAD] The Next.js App Router Interactivity Cheat Sheet

Stop fighting 'use client' errors. Get the 5 patterns I use to handle state and events without bloating your client bundle. Download the Cheat Sheet Here (Lead Magnet Placeholder)

The #1 Mistake: Forgetting 'use client'

In the Next.js App Router, components are Server Components by default. Server Components are rendered on the server and cannot handle browser events like

onClick

To use a button with a click handler, you must add the

"use client";

directive at the very top of your file.

Modern App Router Example

// components/InteractiveButton.tsx
"use client";

export default function InteractiveButton() {
  const handleClick = () => {
    alert("Button clicked in the browser!");
  };

  return (
    <button 
      onClick={handleClick}
      className="px-4 py-2 bg-blue-600 text-white rounded-md"
    >
      Click Me
    </button>
  );
}

The "Server-to-Client" Pattern

A common business requirement is fetching data on the server but handling clicks on the client. You should keep your data fetching in a Server Component and pass only the necessary data to an Interactive Client Component.

// app/page.tsx (Server Component)
import InteractiveButton from './components/InteractiveButton';

export default function Page() {
  return (
    <main>
      <h1>Product Dashboard</h1>
      {/* The button handles interactivity, the page stays a Server Component */}
      <InteractiveButton />
    </main>
  );
}

Navigating on Click (The Right Way)

Don't use

window.location.href

. In Next.js, use the

useRouter

hook from

next/navigation

for a seamless SPA-like transition.

"use client";
import { useRouter } from 'next/navigation';

export default function NavButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/dashboard')}>
      Go to Dashboard
    </button>
  );
}

Building a Complex Next.js App?

Handling interactivity at scale is hard. I help teams migrate legacy React apps to the Next.js App Router while improving Core Web Vitals. Book a 15-minute consulting discovery call

Common Errors & FAQs (SEO)

Error: "Event handlers cannot be passed to Client Component props"

This happens when you try to pass a function (like

onClick

) from a Server Component to a Client Component. Solution: Define the function inside the Client Component or move the logic to a Server Action.

Can I use onClick in a Server Component?

No. All interactivity requires the browser's JavaScript engine. You must use a Client Component for

onClick

onScroll

useState

, or

useEffect

How do I track button clicks in Next.js?

You can trigger analytics (like Google Analytics or PostHog) inside the

onClick

handler of a Client Component.

Conclusion

Mastering

onClick

in Next.js is about understanding the boundary between the server and the client. By keeping your interactivity isolated in small Client Components, you ensure your application remains high-performance.

Happy coding!