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
+74 −38
Open

docs: add types to image loader examples #85517

Changes from 1 commit
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
78 changes: 57 additions & 21 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"
```js 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 }) {
```js 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 @@ -73,7 +77,9 @@ To learn more about configuring the behavior of the built-in [Image Optimization

```js
// 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}`
}
```
Expand All @@ -82,7 +88,9 @@ export default function akamaiLoader({ src, width, quality }) {

```js
// 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 @@ -95,7 +103,9 @@ export default function cloudfrontLoader({ src, width, quality }) {

```js
// 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}`
}
Expand All @@ -105,7 +115,9 @@ export default function cloudinaryLoader({ src, width, quality }) {

```js
// 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}`
}
Expand All @@ -115,7 +127,9 @@ export default function cloudflareLoader({ src, width, quality }) {

```js
// 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 @@ -128,7 +142,9 @@ export default function contentfulLoader({ src, width, quality }) {

```js
// 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 @@ -141,7 +157,9 @@ export default function fastlyLoader({ src, width, quality }) {

```js
// 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 @@ -154,7 +172,9 @@ export default function gumletLoader({ src, width, quality }) {

```js
// 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}`)]
return `https://example.com${src}?imgeng=/${params.join('/')`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two syntax errors in the imageengine loader example:

  1. Line 179 has an extra closing parenthesis in the array definition:

    const params = [`w_${width}`, `cmpr_${compression}`)]

    Should be:

    const params = [`w_${width}`, `cmpr_${compression}`]

  2. Line 180 has a misplaced backtick in the return statement:

    return `https://example.com${src}?imgeng=/${params.join('/')`

    Should be:

    return `https://example.com${src}?imgeng=/${params.join('/')}`

These syntax errors would prevent the loader from functioning correctly.

Suggested change
const params = [`w_${width}`, `cmpr_${compression}`)]
return `https://example.com${src}?imgeng=/${params.join('/')`
const params = [`w_${width}`, `cmpr_${compression}`]
return `https://example.com${src}?imgeng=/${params.join('/')}`

Spotted by Graphite Agent

Fix in Graphite

Is this helpful? React 👍 or 👎 to let us know.

Expand All @@ -165,7 +185,9 @@ export default function imageengineLoader({ src, width, quality }) {

```js
// 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 @@ -182,7 +204,9 @@ export default function imgixLoader({ src, width, quality }) {
// 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 @@ -193,7 +217,9 @@ export default function pixelBinLoader({ src, width, quality }) {

```js
// 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 @@ -211,7 +237,9 @@ export default function sanityLoader({ src, width, quality }) {

```js
// 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 @@ -225,7 +253,9 @@ export default function sirvLoader({ src, width, quality }) {

```js
// 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 @@ -237,7 +267,9 @@ export default function supabaseLoader({ src, width, quality }) {

```js
// 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}`
}
Expand All @@ -247,7 +279,9 @@ export default function thumborLoader({ src, width, quality }) {

```js
// 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(',')}`
}
Expand All @@ -257,7 +291,9 @@ export default function imageKitLoader({ src, width, quality }) {

```js
// 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