[Next 9.0] How to remove the clickable label "Prerendered Page" and loading Icon ?

[KiyeopYang]

I want to remove "Prerendered Page" label and icons (Thunder, Triangle).
they appear while env is development mode.
but I don't know how to remove them.
Can you help me?

(Thunder Icon)

[hoangvvo]

I believe this is a feature to improve DX. Keep in mind that it will not appear in production

[KiyeopYang]

@hoangvvo my website use many iframes and they are developed by nextjs. so the feature worsen my development experience. some small iframes are hidden by the label and button. I know they don't appear in production env.

[timneutkens]

Would highly recommend not removing it, you need this indication to be able to tell if pages are static or not. We might be able to hide it on small viewports though 🤔

[Janpot]

@timneutkens Would it make sense to create some sort of "next devtools" browser extension that provides feedback like this (and potentially many more things), rather than pollute the DOM with these indicators?

[shahruz]

The CSS method works great, but I'd love the option of disabling this in next.config.js or maybe logging it to the console on page load instead.

The information is useful but I don't believe it's so crucial to the development process or changing frequently enough that it should need to occupy space on the page all the time.

[chrispuska]

My few cents on the DX part:

• If I'm developing a site locally, why do I have to be reminded that it's static or not on every reload? I know this already.
• Copy just says "Prerendered page", which is what I'd expect by default. Does this change when hydrate changes the layout?
• ⚡️icon usually means warning, do I have to be warned that everything is in one way or the other?

Would make sense to have this as an opt-in debug tool, or when there could be a switch between static/non-static without actual input from a developer. Now I just have to write extra CSS to be able to use the whole screen to develop a site, which breaks the previously great DX for me.

(Curious to see if there is anything else behind this.)

[Everettss]

This "Prerendered Page" label and icons (Thunder, Triangle) are problematic when you run cypress tests with cypress-axe in development mode. Default axe rules will break on those HTML icon elements.

[Timer]

@Everettss Noted, but tests should be ran against your production build of Next.js.

[Everettss]

@Timer It's not a point here to argue that running test in dev mode is good or bad practice. I've used dev mode in cypress open to tweak test/pages with great success until this prerender/rebuilding indicators came out.

The same problem will occur in react-axe, they explicitly say that you should run this react-axe only in dev mode.

Maybe a description of my problems lead to another issue "prerender/rebuilding indicators not passing a11y standards"?

[sindresorhus]

The prerendered icon is also useless when using Next.js in an Electron app. Please add an option to disable it.

[callumlocke]

Sorry if I'm being stupid, but what does the little lightning button is for? Clicking it just makes it disappear. What is it? Is it documented anywhere?

[buesing]

I agree with @shahruz , I don't think the information is so important as to warrant an obtrusive icon sitting in the page at all times. Every designer I'm showing a WIP locally is confused about this icon.

Maybe I'm missing something, but why is this so important to know? Is there something I should keep in mind if the page is rendered statically? I thought it's more of a quiet optimization which doesn't really make a difference from a dev standpoint. Also goes against the WYSIWYG spirit IMO.

[timneutkens]

I thought it's more of a quiet optimization which doesn't really make a difference from a dev standpoint.

There's a massive difference between static vs ssr in terms of performance etc. hence why it requires a clear indication. The problem is that currently it doesn't link to a document about it, which is on the backlog of things to add. Created #8603 to track it.

Besides that we'll have a better indicator soon.

With regards to Electron apps, maybe we can detect and disable it 🤔

[sindresorhus]

With regards to Electron apps, maybe we can detect and disable it 🤔

Yes, it would be nice if it was disabled by default for Electron. You can detect Electron with 'electron' in process.versions.

However, it's clear from the response here that there should still be a way to disable it manually.

[Sidnioulz]

I'd like to add that developing a chat UI where the bottom right corner is the send button is pretty annoying with this icon, as I constantly have the icon on the way during development and testing.

Allowing disabling the icon in any case will cover all use cases, unlike disabling it automatically only for Electron users.

[CosmicSage]

if someone could explain how to get that small triangular animation in production i'd thank you

[github0013]

https://nextjs.org/docs/#automatic-prerender-indicator

// next.config.js
module.exports = {
  devIndicators: {
    autoPrerender: false,
  },
}

[ahmadawais]

^The same code with the following link for description → https://nextjs.org/docs#automatic-static-optimization-indicator

[nfantone]

I came here looking for instructions on how to remove the label (for some reason this issue ranks higher in a Google search than the actual docs for the same).

TBH, I can't help but agree with some of the comments here. The floating label is way too intrusive, IMHO. The project I'm working on happens to use notification toasts with clickable actions, such as UNDO - and become really hard to use or even read with the Next.js label being rendered on top, each time.

The intention of the indicator is clearly aimed to help developers not UX designers. So maybe it could be made into a console.log message, instead? Or, at the very least, reduce its z-index to a minimum?

[ybentz]

The docs paths have changed recently, here's the updated link to the relevant doc https://nextjs.org/docs/api-reference/next.config.js/static-optimization-indicator

[ybentz]

FWIW, I agree that it seems like too prime of a location for the majority of use cases and day to day.
This can be implemented as a simple browser extension that will either add a new tab to the devtools in case there's more functionality to add later on or even simpler by showing the stats in the extension's main popup or changing its icon's colors (similar to what AMP validator does).

[reubenayres]

While the indicator was frustratingly in the way for me as well, I do find the information important/useful, so it would be great to have (the option to have) it logged to the console. Like maybe, say, in next.config.js, autoPrerender had possible values of true, false, or 'log'.

[Marujah]

This "Prerendered Page" label and icons (Thunder, Triangle) are problematic when you run cypress tests with cypress-axe in development mode. Default axe rules will break on those HTML icon elements.

have the same issue. Did you find a workaround for it? excluding the id in the checkA11y didn't help

[Timer]

This indicator was removed in Next.js 10 as it has served its purpose to teach people about Next.js' static abilities.