Skip to content

docs: add types to image loader examples #85517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: canary
Choose a base branch
from
Open

docs: add types to image loader examples #85517

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
374d727
docs: add types to image loader examples
remcohaszing Oct 29, 2025
639652c
docs: fix syntax error in example
remcohaszing Oct 30, 2025
a9d79aa
docs: change the images code block languages to ts
remcohaszing Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 74 additions & 38 deletions docs/01-app/03-api-reference/05-config/01-next-config-js/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ If you want to use a cloud provider to optimize images instead of using the Next
module.exports = {
images: {
loader: 'custom',
loaderFile: './my/image/loader.js',
loaderFile: './my/image/loader.ts',
},
}
```
Expand All @@ -20,10 +20,12 @@ This `loaderFile` must point to a file relative to the root of your Next.js appl

<AppOnly>

```js filename="my/image/loader.js"
```ts filename="my/image/loader.ts"
'use client'

export default function myImageLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function myImageLoader({ src, width, quality }: ImageLoaderProps) {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
```
Expand All @@ -38,8 +40,10 @@ To learn more about configuring the behavior of the built-in [Image Optimization

<PagesOnly>

```js filename="my/image/loader.js"
export default function myImageLoader({ src, width, quality }) {
```ts filename="my/image/loader.ts"
import type { ImageLoaderProps } from 'next/image'

export default function myImageLoader({ src, width, quality }: ImageLoaderProps) {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
```
Expand Down Expand Up @@ -71,18 +75,22 @@ To learn more about configuring the behavior of the built-in [Image Optimization

### Akamai

```js
```ts
// Docs: https://techdocs.akamai.com/ivm/reference/test-images-on-demand
export default function akamaiLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function akamaiLoader({ src, width, quality }: ImageLoaderProps) {
return `https://example.com/${src}?imwidth=${width}`
}
```

### AWS CloudFront

```js
```ts
// Docs: https://aws.amazon.com/developer/application-security-performance/articles/image-optimization
export default function cloudfrontLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function cloudfrontLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
url.searchParams.set('format', 'auto')
url.searchParams.set('width', width.toString())
Expand All @@ -93,29 +101,35 @@ export default function cloudfrontLoader({ src, width, quality }) {

### Cloudinary

```js
```ts
// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
export default function cloudinaryLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function cloudinaryLoader({ src, width, quality }: ImageLoaderProps) {
const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
return `https://example.com/${params.join(',')}${src}`
}
```

### Cloudflare

```js
```ts
// Docs: https://developers.cloudflare.com/images/transform-images
export default function cloudflareLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function cloudflareLoader({ src, width, quality }: ImageLoaderProps) {
const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
return `https://example.com/cdn-cgi/image/${params.join(',')}/${src}`
}
```

### Contentful

```js
```ts
// Docs: https://www.contentful.com/developers/docs/references/images-api/
export default function contentfulLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function contentfulLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
url.searchParams.set('fm', 'webp')
url.searchParams.set('w', width.toString())
Expand All @@ -126,9 +140,11 @@ export default function contentfulLoader({ src, width, quality }) {

### Fastly

```js
```ts
// Docs: https://developer.fastly.com/reference/io/
export default function fastlyLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function fastlyLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
url.searchParams.set('auto', 'webp')
url.searchParams.set('width', width.toString())
Expand All @@ -139,9 +155,11 @@ export default function fastlyLoader({ src, width, quality }) {

### Gumlet

```js
```ts
// Docs: https://docs.gumlet.com/reference/image-transform-size
export default function gumletLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function gumletLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
url.searchParams.set('format', 'auto')
url.searchParams.set('w', width.toString())
Expand All @@ -152,20 +170,24 @@ export default function gumletLoader({ src, width, quality }) {

### ImageEngine

```js
```ts
// Docs: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives
export default function imageengineLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function imageengineLoader({ src, width, quality }: ImageLoaderProps) {
const compression = 100 - (quality || 50)
const params = [`w_${width}`, `cmpr_${compression}`)]
const params = [`w_${width}`, `cmpr_${compression}`]
return `https://example.com${src}?imgeng=/${params.join('/')`
}
```

### Imgix

```js
```ts
// Demo: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
export default function imgixLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function imgixLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
const params = url.searchParams
params.set('auto', params.getAll('auto').join(',') || 'format')
Expand All @@ -178,11 +200,13 @@ export default function imgixLoader({ src, width, quality }) {

### PixelBin

```js
```ts
// Doc (Resize): https://www.pixelbin.io/docs/transformations/basic/resize/#width-w
// Doc (Optimise): https://www.pixelbin.io/docs/optimizations/quality/#image-quality-when-delivering
// Doc (Auto Format Delivery): https://www.pixelbin.io/docs/optimizations/format/#automatic-format-selection-with-f_auto-url-parameter
export default function pixelBinLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function pixelBinLoader({ src, width, quality }: ImageLoaderProps) {
const name = '<your-cloud-name>'
const opt = `t.resize(w:${width})~t.compress(q:${quality || 75})`
return `https://cdn.pixelbin.io/v2/${name}/${opt}/${src}?f_auto=true`
Expand All @@ -191,9 +215,11 @@ export default function pixelBinLoader({ src, width, quality }) {

### Sanity

```js
```ts
// Docs: https://www.sanity.io/docs/image-urls
export default function sanityLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function sanityLoader({ src, width, quality }: ImageLoaderProps) {
const prj = 'zp7mbokg'
const dataset = 'production'
const url = new URL(`https://cdn.sanity.io/images/${prj}/${dataset}${src}`)
Expand All @@ -209,9 +235,11 @@ export default function sanityLoader({ src, width, quality }) {

### Sirv

```js
```ts
// Docs: https://sirv.com/help/articles/dynamic-imaging/
export default function sirvLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function sirvLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
const params = url.searchParams
params.set('format', params.getAll('format').join(',') || 'optimal')
Expand All @@ -223,9 +251,11 @@ export default function sirvLoader({ src, width, quality }) {

### Supabase

```js
```ts
// Docs: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader
export default function supabaseLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function supabaseLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(`https://example.com${src}`)
url.searchParams.set('width', width.toString())
url.searchParams.set('quality', (quality || 75).toString())
Expand All @@ -235,29 +265,35 @@ export default function supabaseLoader({ src, width, quality }) {

### Thumbor

```js
```ts
// Docs: https://thumbor.readthedocs.io/en/latest/
export default function thumborLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function thumborLoader({ src, width, quality }: ImageLoaderProps) {
const params = [`${width}x0`, `filters:quality(${quality || 75})`]
return `https://example.com${params.join('/')}${src}`
}
```

### ImageKit.io

```js
```ts
// Docs: https://imagekit.io/docs/image-transformation
export default function imageKitLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function imageKitLoader({ src, width, quality }: ImageLoaderProps) {
const params = [`w-${width}`, `q-${quality || 80}`]
return `https://ik.imagekit.io/your_imagekit_id/${src}?tr=${params.join(',')}`
}
```

### Nitrogen AIO

```js
```ts
// Docs: https://docs.n7.io/aio/intergrations/
export default function aioLoader({ src, width, quality }) {
import type { ImageLoaderProps } from 'next/image'

export default function aioLoader({ src, width, quality }: ImageLoaderProps) {
const url = new URL(src, window.location.href)
const params = url.searchParams
const aioParams = params.getAll('aio')
Expand Down
Loading