App Router
Menu
Layouts
Nested Layouts
Grouped Layouts
Parallel Routes
File Conventions
Loading
Error
Not Found
Data Fetching
Streaming with Suspense
Static Data
Dynamic Data
Incremental Static Regeneration
Revalidate Path | Tag
ISR Cache STALE
Preview (Draft) Mode
Static page with Query vars
Components
Client Context
Responsive Image
Misc
Client Component Hooks
CSS and CSS-in-JS
Code Snippets
Legacy (Pages Router)
Revalidate Path (pages-router)
ISR Cache STALE (pages-router)
By
View code
or
deploy your own
acme.com
/
responsive-image
/
picture
/
Same Image
Different Images (NextImage)
Different Images (html)
Responsive Images (multiple assets +
LCP optimization
) )
Image Component With Layout Responsive
Uses html
<picture/>
tag.
Use
ReactDom.preload()
to create the prefetch link (same as a
Code
).
Docs
Code
By
View code
or
deploy your own