ServicesAI AutomationPortfolioContactBlogStoreWhatsApp Me

How to Use onClick in Next.js (App Router, 2026)

May 14, 2026

Quick answer: I fix onClick in Next.js by adding the 

'use client'
directive to the top of the file. This error happens because event handlers only work in Client Components. I recommend either converting the file or moving your button logic into a separate client-side component while using Server Actions for data.

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)

Why is my Next.js button onClick not working?

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>
  );
}

How do you pass data from a Server Component to a Client Component?

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>
  );
}

How do you navigate to a page on a button click in Next.js?

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

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!

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How do I fix 'Event handlers cannot be passed to Client Component props' in Next.js?", "acceptedAnswer": { "@type": "Answer", "text": "This error occurs when you try to pass a function like onClick from a Server Component to a Client Component. To fix it, either define the function directly inside a 'use client' component or use Server Actions for logic that doesn't require immediate UI feedback." } }, { "@type": "Question", "name": "Can I use onClick in a Next.js Server Component?", "acceptedAnswer": { "@type": "Answer", "text": "No, Server Components do not support browser events like onClick. You must add the 'use client' directive to the top of your component file to enable interactivity." } }, { "@type": "Question", "name": "What is the best way to navigate on click in Next.js?", "acceptedAnswer": { "@type": "Answer", "text": "The best way to navigate on a button click is using the useRouter hook from 'next/navigation'. This ensures a fast, client-side transition without a full page reload." } } ] } </script>

Frequently asked questions

My button is throwing "Event handlers cannot be passed to Client Component props" what's up?

That error means you're trying to pass a function, like your 

onClick
handler, from a Server Component down to a Client Component. Server Components don't do browser events. Define the function directly inside your 
"use client"
component, or look into Server Actions if the logic doesn't need immediate UI interaction.

Can I just use 
onClick
directly in a Server Component?

Absolutely not. Server Components render once on the server. They don't have access to browser JavaScript. For any 

onClick
, 
useState
, or 
useEffect
, you need to explicitly mark your component with 
"use client";
at the top of the file.

How do I handle navigation on click without 
window.location.href
?

Ditch 

window.location.href
. In the App Router, you should import and use the 
useRouter
hook from 
next/navigation
. Call 
router.push('/your-path')
inside your click handler. It provides a much better, SPA-like experience for your users.

What's the "Server-to-Client" pattern all about?

It's about keeping your app lean. Fetch data in your Server Component, then pass only the necessary data down to a small, interactive Client Component. This way, the bulk of your page stays on the server, benefiting performance and SEO, while client-side interactivity still functions.

Related Articles