When using Next.js App Router, attempting to start an OAuth flow using client-side routing (like next/link or router.push) to the Payload authorize endpoint (/api/<auth-collection>/oauth/authorize) can cause RSC fetch failures.
Symptoms
- The browser console logs:
Failed to fetch RSC payload for .../api/<auth-collection>/oauth/authorize. Falling back to browser navigation. - The OAuth flow usually continues via fallback, but the error is noisy and indicates an incorrect navigation method.
Root Cause
The authorize endpoint is a Payload API endpoint that returns an HTTP 302 redirect to an external provider. Next.js App Router attempts to fetch an RSC payload when it detects a client-side navigation to a same-origin URL. If this fetch follows the redirect, it fails because the destination is not an RSC payload.
Recommended Fix
Instead of using client-side routing, use document navigation to trigger the OAuth flow. This ensures the browser performs a full request to the API endpoint rather than an RSC fetch probe.
Use one of the following methods:
- A standard HTML anchor tag:
<a href="/api/users/oauth/authorize">Login</a> - A standard HTML
<form> or Server Action. - Programmatic navigation via
window.location.assign('/api/users/oauth/authorize').
Note: Setting prefetch={false} on a next/link component may reduce prefetching but does not prevent the initial RSC fetch probe upon clicking the link.
// ❌ AVOID: This triggers an RSC fetch probe and causes console errors
import Link from 'next/link';
<Link href="/api/users/oauth/authorize">Login</Link>
// ✅ PREFERRED: Use standard document navigation
<a href="/api/users/oauth/authorize">Login</a>
// ✅ PREFERRED: Programmatic document navigation
const handleLogin = () => {
window.location.assign('/api/users/oauth/authorize');
};