mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Zack TannerandGitHub
0d4649989d
When self-hosting Next.js, it's possible to customize a cache handler for ISR. Self-hosted Next.js also makes use of a similar cache interface for `next/image`, but there's no way to customize this cache handler. This plugs into the [existing ability](https://nextjs.org/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath) to customize a `cacheHandler` to support the `IMAGE` type. This lets you implement whatever constraints you might have on your self-hosted environment, eg the need for an LRU cache, or storing optimized images outside of disk. This is currently opt-in because it's a breaking change for cache handlers to start receiving `IMAGE` cache types, which we'll make default in the next major.
35 lines
690 B
TypeScript
35 lines
690 B
TypeScript
import Image from 'next/image'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div>
|
|
<p>hello world</p>
|
|
{/* Each unique width/quality combination creates a separate cache entry */}
|
|
<Image
|
|
id="image-small"
|
|
src="/test.png"
|
|
width={100}
|
|
height={100}
|
|
quality={75}
|
|
alt="small image"
|
|
/>
|
|
<Image
|
|
id="image-medium"
|
|
src="/test.png"
|
|
width={200}
|
|
height={200}
|
|
quality={75}
|
|
alt="medium image"
|
|
/>
|
|
<Image
|
|
id="image-large"
|
|
src="/test.png"
|
|
width={400}
|
|
height={400}
|
|
quality={75}
|
|
alt="large image"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|