nextjs - 💡(How to fix) Fix (Await) Redirect causes content collapse (empty state) instead of showing a loader [4 comments, 3 participants]

Link to the code that reproduces this issue

https://github.com/GlebKodrik/redirect

To Reproduce

To Reproduce Start the app with next dev On the page, click the "GO TO CHECK" button You will first see "TEST LOADING..." Then the page content collapses (shows an empty state/blank screen) Finally, the target page content (from gleb) is displayed

Current vs. Expected behavior

Current Behavior After triggering a redirect with redirect from next/navigation, the UI briefly collapses to an empty state before rendering the redirected content. This looks like a freeze or glitch. The issue happens both in development and after running a production build.

Expected Behavior Instead of collapsing to an empty state, the app should keep showing a loader (or any fallback UI) until the redirected page is fully rendered. The transition should feel smooth without a "flash of nothing".

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0
Binaries:
  Node: 20.17.0
  npm: 10.8.2
Relevant Packages:
  next: 15.4.4
  react: 19.1.0
  react-dom: 19.1.0
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Redirects

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The issue is reproducible locally. I would like to avoid the "collapse" state and instead keep a loader until the redirected page content is ready.

Now, in order for everything to work beautifully, you need to use

<RedirectionPageClient
        redirectUrl={redirectUrl}
        fallback={<Loading />}
      />

'use client';

import { useRouter } from 'next/navigation';
import { ReactNode, useEffect } from 'react';

type RedirectionPageClientProps = {
  redirectUrl: string;
  replace?: boolean;
  fallback: ReactNode;
};
export function RedirectionPageClient({
  redirectUrl,
  replace,
  fallback,
}: RedirectionPageClientProps) {
  const router = useRouter();

  useEffect(() => {
    if (replace) {
      router.replace(redirectUrl);
    } else {
      router.push(redirectUrl);
    }
  }, [redirectUrl, replace, router]);

  return fallback;
}

It needs to be on the server, not the client.