cover image
nextjs react router

Next.js Redirect Without Flashing Content

September 21, 2024
2 min read
396 words

Hey there, fellow developers! Today, I want to talk to you about a common issue that many of us face when working with Next.js - the dreaded flashing content when redirecting. If you’ve ever experienced this, you know how frustrating it can be to see your page briefly display the wrong content before redirecting to the correct one. But fear not, because I’m here to share some tips on how to redirect in Next.js without any flashing content.

First off, let’s talk about why this flashing content occurs in the first place. When you use the built-in Router from Next.js to redirect to a new page, the browser has to fetch the new page and render it, which can cause a brief moment where the old content is still visible. This is especially noticeable on slower connections or when the new page has a lot of content to load.

So, how can we prevent this from happening? One solution is to use the next/router package to manually push a new route without triggering a full page refresh. By doing this, we can ensure that the new page is loaded and displayed without any flashing content.

Here’s a quick example of how you can achieve this:

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/new-page', undefined, { shallow: true });
  };

  return (
    <button onClick={handleClick}>Go to New Page</button>
  );
};

In this example, we’re using the router.push method with the shallow: true option to push a new route without reloading the entire page. This way, the new page is loaded seamlessly without any flashing content.

Another approach is to use the next/head component to set a custom meta tag that tells the browser to prefetch the new page when the user hovers over a link. By prefetching the new page, we can ensure that it loads quickly and smoothly when the user clicks on the link.

import Head from 'next/head';

const MyComponent = () => {
  return (
    <>
      <Head>
        <link rel=prefetch href=/new-page />
      </Head>
      <a href=/new-page>Go to New Page</a>
    </>
  );
};

By using these techniques, we can redirect in Next.js without any flashing content and provide a seamless user experience. So next time you’re working on a project with Next.js, keep these tips in mind to ensure smooth transitions between pages. Happy coding!

Back to notes