Next.js should have an unobtrusive linting toast

[Timer]

Next.js should emit linting and non-critical build errors in an unobtrusive toast instead of a full-screen error overlay.

Notably, this is desirable for TypeScript since some users rely on TypeScript as a linter instead of type checker.

Closes #8060

[kachkaev]

Also related to #7687

[chrisblossom]

Copied(ish) from #8331 (comment):

What if next.js had a browser addon that would display information such as build / type / lint errors in a non-intrusive way (outside of the actual webpage, like redux-devtools-extension does) plus any other relevant information specific to next.js (such as if it is a static page), and toggle certain settings such as:

Current ideas:

Toggles (disable/enable):

• Integrated Typescript checks
• Integrated lint checks
• Server-side rendering
• Client-side JavaScript
• Make page static / dynamic

Information:

• Build status / errors
• Lint status / errors
• Type status / errors
• Bundle analysis (with possible recommendations?)
• Performance metrics (with possible recommendations?)
• Pre-rendered page indicator [Next 9.0] How to remove the clickable label "Prerendered Page" and loading Icon ? #7945
• All other next.js specific page-embedded information markers

Switches:

• Restart next.js server
• Clear cookies
• Reset state

I'm sure there are plenty more options that make sense here.

I think this could further level-up next.js above their competition and go along way for developer UX.

EDIT: Added recommendations from @Janpot.

[Janpot]

I like the idea of a browser extension (#7945 (comment)). I'm also thinking it could have things like bundle analysis and performance metrics.