next/image flicker when switching pages

[ayuhito]

I've been a little lost trying to figure out this issue.
https://next-lotus-starter.vercel.app/

Small starter boilerplate using Chakra UI I've made for myself. When I'm clicking between the Home page and Page 2, the logo on the top left flickers.

I have a feeling it's something related to next/image and how it serves images dynamically but I'm not sure if there is any real way to solve this.

Appreciate anyone who takes the time looking into this!

[leerob]

This is because the image is lazy-loaded by default. Since the image is at the top ("above the fold"), you can use priority so that it's properly preloaded.

Note: there was a bug fix for this that shipped in 10.0.5, so update to that!

[thepors]

Still does not work on next 11. I am changing src as the state of a component updates. Every time it changes src, it flashes before it updates the image. Although, it works fine if I use the native <img /> tag.

Have you check this link : https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

I did it by change some behavior of _app.js by following that link and it is work fine for me.

[kurtchou]

that worked 2025/08/06

[brunobely]

@temurih did you ever figure out how to prevent this?

[temurih]

@temurih did you ever figure out how to prevent this?

For that project, I just used the native <img src="" />. Since then I created new projects with latest next version, and it worked fine.

[kurtchou]

@temurih did you ever figure out how to prevent this?

I used priority set to true and fixed it. Sometimes with localhost with slow internet connection is still funky

[ZhengRui]

I am having the same issue, but using priority doesn't work for me. A very minimum example I can replicate this issue:
index.js:

import Link from 'next/link'
import Image from "next/image"

const IndexPage = () => {

  return (
    <>
      <h1>HOME</h1>

      <Image src="/lotus-logo-d.svg" width={32} height={32} priority={true}/>

       <p>
        <Link href="/about">
          <a>About</a>
        </Link>
      </p>
    </>
  )
}

export default IndexPage

about.js:

import Link from 'next/link'
import Image from "next/image"

const AboutPage = () => {

  return (
    <>
      <h1>ABOUT</h1>

      <Image src="/lotus-logo-d.svg" width={32} height={32} priority={true}/>

      <p>
        <Link href="/">
          <a>Home</a>
        </Link>
      </p>
    </>
  )
}

export default AboutPage

when I go back and forth between these two pages, i can clearly see the flickering of the logo file. I know i didn't put it inside a layout here, but in my own app i did put the logo inside a root level layout component and both have this flickering issue. @DecliningLotus I am curious on your app link, it doesn't flicker when I go back and forth, I checked your repo's code I don't see big differences between your layout logic and mine, would you shed some light on what could be the things that I may neglect? Thanks ! @leerob

[ZhengRui]

For those who face same issue like me, I found this post is very helpful to understand this issue:
https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
With the most recent nextjs above 10, be sure to change the _app.js following the doc: https://nextjs.org/docs/advanced-features/custom-app , I had the issue of Component.layout being undefined if I use class MyApp extends App { render() {}}. I can get a persistent logo and Navbar following this.

I don't see in @DecliningLotus 's repo, it uses a Layout wrapper in _app.js file, I am wondering if it is because FlexProps from Chakra-ui did the magic ?

[thepors]

This link : https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/ is very helpful. Thank you @ZhengRui for posting here.

[ZhengRui]

I just found out I saw the logo flickers is because I am in Chrome debug mode :(, if I close the debug window then it does not flicker. @DecliningLotus 's app also flickers if I am in debug mode. So the conclusion is:

• if you want it to be absolute persistent even in debug mode, consider using customized Layout logic in _app.js
• otherwise navbar with a normal layout won't flicker if its content doesn't really change during page transition (just my experience, not sure it's 100% correct)

[alexmassicott]

I agree, it’s very janky

[dsacramone]

Swear I used to be surprised with how smooth everything looked, now it seems like everything is flashing and jumping which makes me wonder if it's due to a recent update 🤔 Right now each page has its own Page component which loads the page layout. Which is why I used to be so surprised, but now it seems janky :\

Did you end up sorting this out? If so, how?

[alexmassicott]

Swear I used to be surprised with how smooth everything looked, now it seems like everything is flashing and jumping which makes me wonder if it's due to a recent update 🤔 Right now each page has its own Page component which loads the page layout. Which is why I used to be so surprised, but now it seems janky :\

Did you end up sorting this out? If so, how?

I figured it out, it was because I had the images loading set to lazy.
Setting images to eagerly load fixed the issue.

[imprisonedmind]

Can confirm closing console/debug window solved flickering for me....

[GrahamQuan]

OMG You saved my day. Closing the debug window works.
PS: It will also happen on Edge (Chromium)

[milosjovancevic]

I am experiencing this issue as well. I have a Sidebar component that is rendering an image, on route change that image is blinking.
I am using "next": "^13.4.12", I have added sharp and tried with priority but it doesn't help.
Any advice would be appreciated!

I am statically importing image and using it like this:
<NextImage src={imgUrl} alt="property" fill placeholder="blur" priority sizes="100vw" style={{ objectFit="cover" }} />

[cbratschi]

I have the same issue with the app router. The navbar contains an SVG which is loaded with priority. The footer contains the same SVG which is lazy loaded. Now while navigating back and forth sometime the navbar image and sometimes the footer image are flickering. Looks very strange and is clearly visible on Safari on iOS. Much less on macOS browsers.

Happens using the img element directly too. The SVG is a static asset delivered as is.

All pages use the same layout.tsx which contains the navbar and the footer. So the images should not change at all and I don't see any network requests.

The affected components are all rendered on the server.

[cbratschi]

• 100% reproducible on iOS Safari (17.0.1).
• Often reproducible on macOS Safari (16.6; definitely different behavior than on iOS).
• Not reproducible on macOS Chrome.

Looks like a pure Safari issue (latest iOS version; macOS not yet upgraded to Sonoma).

[cbratschi]

And seeing some network activity on Safari only. It is loading the SVG image!

Will do some more checks in the next days.

[cbratschi]

This was caused by Cache-Control being set to 'public, max-age=0'. Chrome still caches the images in memory but Safari performs additional roundtrips.

Solved it by adding this to next.config.js:

    /**
     * Change response headers.
     *
     * @returns
     */
    async headers() {
        return [{
            //cache all images, fonts, etc. in the public folder
            //Note: Next.js default is 'public, max-age=0' which cases many reloads on Safari!
            //Note: we use version hashes and therefore can use immutable
            source: '/:all*(svg|jpg|jpeg|png|gif|ico|webp|mp4|ttf|otf|woff|woff2)',

            headers: [{
                key: 'cache-control',
                value: 'public, max-age=31536000, immutable'
            }]
        }];
    }

Now all navigations are perfectly smooth and caching works as expected. The Next.js docs still specify that Cache-Control cannot be overwritten but we are not using next/image and static assets are served as is. This might not work for all use cases.