Beware of Next.js Prefetching: My Log Out Button Failure

Introduction

Have you ever been surprised by how your production Next.js app behaves, even though everything works perfectly during development? Well, I recently had one of those “aha” (or maybe uh-oh) moments with Next.js prefetching and API routes. I ran into an issue that seemed small at first glance, but it turned out to be both fascinating and tricky.

Let me share my story about a logout button, prefetching behavior, and a production bug that taught me a valuable lesson about Next.js’s optimizations.

The Setup: My Logout Endpoint

I had a simple logout flow in my app was designed to remove a cookie that stored the user’s token. But I ran into a surprising problem when Next.js tried to “help” me by prefetching a logout link before I clicked it. in my Next.js application:

1. API Endpoint: /api/auth/logout - It removes the accessToken from cookies using the Set-Cookie header.
2. Logout Button: A link placed on the profile page that navigates to the logout API endpoint.

Here’s how the logout link looked:

tsx📋
<Link href="/api/auth/logout">
  Log Out
</Link>

During development, everything worked fine. I clicked the logout link, it called the API, removed the cookie, and then I was logged out. Perfect, right? Well… not so fast.

The Problem: Production Prefetching

Next.js, by default, prefetches links when they are visible in the viewport. This optimization makes navigation lightning-fast, which is great for user experience. However, I hadn’t realized this behavior extended to API routes as well.

Here’s what happened in production:

1. I navigated to the profile page where the logout link existed.
2. Next.js prefetched the /api/auth/logout endpoint.
3. The server dutifully processed the request and set the accessToken cookie to expire immediately.
4. Since I hadn’t actually navigated yet, I remained on the profile page.
5. But the next time my app tried to fetch protected data, the accessToken was gone. I was mysteriously logged out!

At first, I didn’t even notice this was happening. I thought something was wrong with my cookie management or session handling. But after digging in, the culprit became clear: Next.js was prefetching my logout link!

Why This Happens: Understanding Next.js Prefetching

Next.js automatically prefetches linkes using the <Link> component when the link is in the viewport. While this behavior is fantastic for navigation speed, it introduces unintended side effects when you use links for actions like logging out. Prefetching causes your logout endpoint to execute prematurely, even though the user hasn’t clicked the link yet.

The Solution: Preventing Prefetching

After identifying the issue, I added the prefetch={false} prop to my logout link:

tsx📋
<Link href="/api/auth/logout" prefetch={false}>
  Log Out
</Link>

The prefetch={false} prop disables Next.js’s prefetching for this particular link, ensuring that the logout API call only happens when the user actually clicks the link.

Now everything worked as expected:

• The user clicks the logout link.
• The cookie gets removed.
• The app redirects or handles the logout flow.

Alternative Approach: Make It a Button

Using a <Link> component for logout is convenient, but API endpoints are not meant to be navigation destinations. A better approach is to handle logout client-side:

tsx📋
const handleLogout = async () => {
  // Remove the cookie with made up class
  Cookie.delete("accessToken")
    
  // Redirect the user to the login page
  window.location.href = "/login"
  // Or using router
  router.push("/login")
}

<button onClick={handleLogout}>
  Log Out
</button>

Here, the logout action becomes explicit, and you have full control over:

• Removing cookie on clientside
• Redirecting the user afterward.

This avoids the pitfalls of using <Link> and aligns with best practices for action-based events.

Key Takeaways

1. Next.js Prefetching: Be aware that Next.js automatically prefetches links in production, which can trigger unintended behaviors for certain endpoints (like logout).
2. Avoid Using <Link> for Actions: API routes, especially those that perform actions (e.g., deleting a session), are not navigation destinations. Use buttons or client-side handlers instead.
3. Prefetch Control: If you must use a <Link> for such actions, add prefetch={false} to disable prefetching.

Final Thoughts

Next.js is an amazing framework that comes with powerful optimizations, but those optimizations can occasionally surprise you if you’re not careful. Prefetching is one of those hidden gems that, while great for performance, can cause unexpected behavior when not fully understood.

If you’re implementing a logout flow (or similar actions), consider handling it explicitly with a button and API call. It’s more predictable, and you’ll avoid surprises in production.

Thanks for reading, and I hope my experience helps you avoid similar issues in your Next.js applications. Happy coding!