From a4f4f551755b0b80c9680e507caca35199388cdc Mon Sep 17 00:00:00 2001
From: Philip Schmidt <philip.schmidt@networkteam.com>
Date: Fri, 19 Jul 2024 10:19:37 +0200
Subject: [PATCH] Change default imgproxy middleware path

---
 README.md              | 10 +++++-----
 src/imgproxy/loader.ts |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 0340639..e2dae7b 100644
--- a/README.md
+++ b/README.md
@@ -117,10 +117,10 @@ Unfortunately, it's not possible to pass a loader function directly to the next
 // imageLoader.ts
 import { imgProxyLoader } from '@networkteam/zebra-utils';
 
-export default imgProxyLoader('_img');
+export default imgProxyLoader('_image');
 ```
 
-The `imgProxyLoader` creates a path with the provided width and quality (through the next image), as well as the base64 encoded src. The function takes a path segment (`_img` by default) which has to match the path segment in the following middleware.
+The `imgProxyLoader` creates a path with the provided width and quality (through the next image), as well as the base64 encoded src. The function takes a path segment (`_image` by default) which has to match the path segment in the following middleware.
 
 ### Middleware
 
@@ -133,7 +133,7 @@ import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
 export const middleware = async (request: NextRequest) => {
-  if (request.nextUrl.pathname.startsWith('/_img/')) {
+  if (request.nextUrl.pathname.startsWith('/_image/')) {
     return imgProxyMiddleware(request);
   }
 
@@ -141,11 +141,11 @@ export const middleware = async (request: NextRequest) => {
 };
 
 export const config = {
-  matcher: '/_img/:path*',
+  matcher: '/_image/:path*',
 };
 ```
 
-The middleware catches all paths starting with `/_img`, so all paths created by the imgproxy loader. Make sure the path segment matches the provided path segment of the imgproxy loader. Besides the request, `imgProxyMiddleware` takes `ImgProxyMiddlewareOptions`, where the allowedWidths could be overwritten.
+The middleware catches all paths starting with `/_image`, so all paths created by the imgproxy loader. Make sure the path segment matches the provided path segment of the imgproxy loader. Besides the request, `imgProxyMiddleware` takes `ImgProxyMiddlewareOptions`, where the allowedWidths could be overwritten.
 
 ### Next config
 
diff --git a/src/imgproxy/loader.ts b/src/imgproxy/loader.ts
index ef382fa..dea597c 100644
--- a/src/imgproxy/loader.ts
+++ b/src/imgproxy/loader.ts
@@ -2,7 +2,7 @@ import { urlSafeBase64 } from './utils';
 import { ImageLoaderProps } from 'next/image';
 
 const imgProxyLoader =
-  (pathSegment: string = '_img') =>
+  (pathSegment: string = '_image') =>
   ({ src, width, quality }: ImageLoaderProps) => {
     // If the source is not an S3 URL, return the original source
     if (!src.startsWith('s3://')) return src;