@akinon/next 1.34.0-rc.2 → 1.34.0-rc.20

package/CHANGELOG.md

@@ -1,16 +1,22 @@
 # @akinon/next
 
-## 1.34.0-rc.2
+## 1.34.0-rc.20
 
 ### Minor Changes
 
+- a4c8d6a: ZERO-2663: Fix the image url for gif and svgs and return them without options
 - d09b677: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
 - 6d4aadb: ZERO-2476: Auto install recommendenent extension
+- 8e6e8cf: ZERO-2524: Removed cli from projectzero so that build works as expected
+- c53ef7b: ZERO-2668: The Link component has been updated to improve the logic for handling href values. Previously, if the href was not a string or started with 'http', it would return the href as is. Now, if the href is not provided, it will default to '#' to prevent any potential errors. Additionally, if the href is a string and does not start with 'http', it will be formatted with the locale and pathname, based on the localeUrlStrategy and defaultLocaleValue. This ensures that the correct href is generated based on the localization settings.
 - ebb63ce: ZERO-2525: Fix category facet removal bug and add close icon to active filters
 - 7cebe87: ZERO-2524: Add check monorepo utility function
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+- bbe18b9: ZERO-2575: Fix build error
 - f0c23bc: ZERO-2135: add custom not found page
 - 3420416: ZERO-2533: extend eslint config from @akinon/next
 - 495d155: ZERO-2505: findBaseDir function is united and move on to the utils
+- beb499e: ZERO-2551: Add new tsconfig paths
 - 40ad73e: ZERO-2504: add cookie filter to api client request
 - 495d155: ZERO-2524: Zero-cli dist checks for changes and renders it to the terminal.
 - f046f8e: ZERO-2575: update version for react-number-format
@@ -19,15 +25,88 @@
 
 ### Patch Changes
 
-- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+- 616690d: ZERO-2635: remove maxRetries from redux
+- 59fb7c3: ZERO-2504: get set-cookie headers from commerce request
+
+## 1.34.0-rc.19
+
+### Minor Changes
+
+- c53ef7b: ZERO-2668: The Link component has been updated to improve the logic for handling href values. Previously, if the href was not a string or started with 'http', it would return the href as is. Now, if the href is not provided, it will default to '#' to prevent any potential errors. Additionally, if the href is a string and does not start with 'http', it will be formatted with the locale and pathname, based on the localeUrlStrategy and defaultLocaleValue. This ensures that the correct href is generated based on the localization settings.
+
+## 1.34.0-rc.18
+
+### Minor Changes
 
-## 1.34.0-rc.1
+- a4c8d6a: ZERO-2663: Fix the image url for gif and svgs and return them without options
+
+## 1.34.0-rc.17
+
+### Minor Changes
+
+- d09b677: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
+- 6d4aadb: ZERO-2476: Auto install recommendenent extension
+- 8e6e8cf: ZERO-2524: Removed cli from projectzero so that build works as expected
+- ebb63ce: ZERO-2525: Fix category facet removal bug and add close icon to active filters
+- 7cebe87: ZERO-2524: Add check monorepo utility function
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+- bbe18b9: ZERO-2575: Fix build error
+- f0c23bc: ZERO-2135: add custom not found page
+- 3420416: ZERO-2533: extend eslint config from @akinon/next
+- 495d155: ZERO-2505: findBaseDir function is united and move on to the utils
+- beb499e: ZERO-2551: Add new tsconfig paths
+- 40ad73e: ZERO-2504: add cookie filter to api client request
+- 495d155: ZERO-2524: Zero-cli dist checks for changes and renders it to the terminal.
+- f046f8e: ZERO-2575: update version for react-number-format
+- 6b2972b: ZERO-2514: Fix handling of status 204 and return Commerce status code in client proxy API.
+- 3e68768: ZERO-2578: Add osessionid check in middleware
 
 ### Patch Changes
 
-- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+- 616690d: ZERO-2635: remove maxRetries from redux
+- 59fb7c3: ZERO-2504: get set-cookie headers from commerce request
+
+## 1.34.0-rc.16
+
+## 1.34.0-rc.15
 
-## 1.34.0-rc.0
+## 1.34.0-rc.14
+
+## 1.34.0-rc.13
+
+## 1.34.0-rc.12
+
+### Patch Changes
+
+- 616690d: ZERO-2635: remove maxRetries from redux
+
+## 1.34.0-rc.11
+
+### Minor Changes
+
+- 8e6e8cf: ZERO-2524: Removed cli from projectzero so that build works as expected
+
+## 1.34.0-rc.10
+
+### Minor Changes
+
+- bbe18b9: ZERO-2575: Fix build error
+
+## 1.34.0-rc.9
+
+### Minor Changes
+
+- beb499e: ZERO-2551: Add new tsconfig paths
+
+## 1.34.0-rc.8
+
+### Minor Changes
+
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+
+## 1.34.0-rc.7
+
+## 1.34.0-rc.6
 
 ### Minor Changes
 
@@ -44,6 +123,18 @@
 - 6b2972b: ZERO-2514: Fix handling of status 204 and return Commerce status code in client proxy API.
 - 3e68768: ZERO-2578: Add osessionid check in middleware
 
+### Patch Changes
+
+- 59fb7c3: ZERO-2504: get set-cookie headers from commerce request
+
+## 1.33.2
+
+## 1.33.1
+
+### Patch Changes
+
+- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+
 ## 1.33.0
 
 ## 1.32.0

package/api/client.ts

@@ -141,7 +141,7 @@ async function proxyRequest(...args) {
       );
     }
 
-    const setCookieHeaders = req.headers.getSetCookie();
+    const setCookieHeaders = request.headers.getSetCookie();
     const exceptCookieKeys = ['pz-locale', 'pz-currency'];
 
     const isExcludedCookie = (name: string) => exceptCookieKeys.includes(name);

package/bin/pz-pre-check-dist.js

@@ -11,11 +11,11 @@ if (!BASE_DIR) {
 
 const packageDistPath = path.join(
   __dirname,
-  '../../../packages/projectzero-cli/dist/commands'
+  '../../../packages/projectzero/dist/commands'
 );
 
 const hash = hashDirectory(packageDistPath);
 fs.writeFileSync(
-  path.join(__dirname, '../../../packages/projectzero-cli/dist/dist-hash.txt'),
+  path.join(__dirname, '../../../packages/projectzero/dist/dist-hash.txt'),
   hash
 );

package/components/input.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { forwardRef, FocusEvent, useState, Ref } from 'react';
 import { Controller } from 'react-hook-form';
+// @ts-ignore
 import { PatternFormat, PatternFormatProps } from 'react-number-format';
 import { InputProps } from '../types';
 import { twMerge } from 'tailwind-merge';

package/components/link.tsx

@@ -10,28 +10,32 @@ type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
-  NextLinkProps;
+  NextLinkProps & {
+    href: string;
+  };
 
 export const Link = ({ children, href, ...rest }: LinkProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
   const formattedHref = useMemo(() => {
-    if (typeof href !== 'string' || href.startsWith('http')) {
-      return href;
+    if (!href) {
+      return '#';
     }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+    if (typeof href === 'string' && !href.startsWith('http')) {
+      const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
     }
 
-    return href || '#';
+    return href;
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (

package/components/price.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+// @ts-ignore
 import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 

package/data/client/api.ts

@@ -1,7 +1,6 @@
 import {
   createApi,
   fetchBaseQuery,
-  retry,
   BaseQueryFn,
   FetchBaseQueryError,
   FetchBaseQueryMeta,
@@ -65,7 +64,7 @@ const customBaseQuery: BaseQueryFn<
 
 export const api = createApi({
   reducerPath: 'api',
-  baseQuery: retry(customBaseQuery, { maxRetries: 3 }),
+  baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
     'BasketB2b',

package/data/server/category.ts

@@ -8,7 +8,7 @@ import logger from '../../utils/log';
 
 function getCategoryDataHandler(
   pk: number,
-  searchParams?: URLSearchParams,
+  searchParams?: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) {
   return async function () {
@@ -78,7 +78,7 @@ export const getCategoryData = ({
   headers
 }: {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/list.ts

@@ -7,7 +7,7 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 
 const getListDataHandler = (
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -54,7 +54,7 @@ export const getListData = async ({
   searchParams,
   headers
 }: {
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/product.ts

@@ -9,7 +9,7 @@ import appFetch from '../../utils/app-fetch';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -74,10 +74,7 @@ export const getProductData = async ({
   groupProduct
 }: GetProduct) => {
   return Cache.wrap(
-    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
-      pk,
-      searchParams ?? new URLSearchParams()
-    ),
+    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](pk, searchParams ?? {}),
     getProductDataHandler({ pk, searchParams, groupProduct }),
     {
       expire: 300

package/data/server/special-page.ts

@@ -7,7 +7,7 @@ import header from '../../redux/reducers/header';
 
 const getSpecialPageDataHandler = (
   pk: number,
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -34,7 +34,7 @@ export const getSpecialPageData = async ({
   headers
 }: {
   pk: number;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/lib/cache-handler.mjs

@@ -0,0 +1,33 @@
+import { CacheHandler } from '@neshca/cache-handler';
+import createLruHandler from '@neshca/cache-handler/local-lru';
+import createRedisHandler from '@neshca/cache-handler/redis-stack';
+import { createClient } from 'redis';
+
+CacheHandler.onCreation(async () => {
+  const redisUrl = `redis://${process.env.CACHE_HOST}:${
+    process.env.CACHE_PORT
+  }/${process.env.CACHE_BUCKET ?? '0'}`;
+
+  const client = createClient({
+    url: redisUrl
+  });
+
+  client.on('error', (error) => {
+    console.error('Redis client error', { redisUrl, error });
+  });
+
+  await client.connect();
+
+  const redisHandler = await createRedisHandler({
+    client,
+    timeoutMs: 5000
+  });
+
+  const localHandler = createLruHandler();
+
+  return {
+    handlers: [redisHandler, localHandler]
+  };
+});
+
+export default CacheHandler;

package/lib/cache.ts

@@ -20,13 +20,16 @@ const hashCacheKey = (object?: Record<string, string>) => {
   return `_${encodeURIComponent(cacheKey)}`;
 };
 export const CacheKey = {
-  List: (searchParams: URLSearchParams, headers?: Record<string, string>) =>
+  List: (
+    searchParams: { [key: string]: string | string[] | undefined },
+    headers?: Record<string, string>
+  ) =>
     `list_${encodeURIComponent(JSON.stringify(searchParams))}${hashCacheKey(
       headers
     )}`,
   Category: (
     pk: number,
-    searchParams?: URLSearchParams,
+    searchParams?: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `category_${pk}_${encodeURIComponent(
@@ -35,15 +38,20 @@ export const CacheKey = {
   CategorySlug: (slug: string) => `category_${slug}`,
   SpecialPage: (
     pk: number,
-    searchParams: URLSearchParams,
+    searchParams: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `special_page_${pk}_${encodeURIComponent(
       JSON.stringify(searchParams)
     )}${hashCacheKey(headers)}`,
-  Product: (pk: number, searchParams: URLSearchParams) =>
-    `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
-  GroupProduct: (pk: number, searchParams: URLSearchParams) =>
+  Product: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) => `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
+  GroupProduct: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) =>
     `group_product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
   FlatPage: (pk: number) => `flat_page_${pk}`,
   LandingPage: (pk: number) => `landing_page_${pk}`,
@@ -158,6 +166,10 @@ export class Cache {
     handler: () => Promise<T>,
     options?: CacheOptions
   ): Promise<T> {
+    if (Settings.usePrettyUrlRoute) {
+      return await handler();
+    }
+
     const requiredVariables = [
       process.env.CACHE_HOST,
       process.env.CACHE_PORT,

package/middlewares/default.ts

@@ -200,6 +200,15 @@ const withPzDefault =
                               );
                             }
 
+                            if (
+                              Settings.usePrettyUrlRoute &&
+                              url.searchParams.toString().length > 0
+                            ) {
+                              url.pathname =
+                                url.pathname +
+                                `searchparams|${url.searchParams.toString()}`;
+                            }
+
                             Settings.rewrites.forEach((rewrite) => {
                               url.pathname = url.pathname.replace(
                                 rewrite.source,

package/middlewares/pretty-url.ts

@@ -56,6 +56,10 @@ const resolvePrettyUrl = async (pathname: string, ip: string | null) => {
 const withPrettyUrl =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    if (Settings.usePrettyUrlRoute) {
+      return middleware(req, event);
+    }
+
     const url = req.nextUrl.clone();
     const matchedLanguagePrefix = url.pathname.match(
       urlLocaleMatcherRegex

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.34.0-rc.2",
+  "version": "1.34.0-rc.20",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -20,11 +20,12 @@
     "@opentelemetry/sdk-trace-node": "1.19.0",
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
+    "@neshca/cache-handler": "1.0.7",
     "cross-spawn": "7.0.3",
     "generic-pool": "3.9.0",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
-    "redis": "4.5.1",
+    "redis": "4.6.13",
     "semver": "7.5.4",
     "set-cookie-parser": "2.6.0"
   },
@@ -34,7 +35,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.2",
+    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.20",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/routes/pretty-url.tsx

@@ -0,0 +1,194 @@
+import { URLS } from '@akinon/next/data/urls';
+import { Metadata, PageProps } from '@akinon/next/types';
+import logger from '@akinon/next/utils/log';
+import { notFound } from 'next/navigation';
+
+type PrettyUrlResult = {
+  matched: boolean;
+  path?: string;
+  pk?: number;
+};
+
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = [] as { old_path: string }[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
+
+    try {
+      const requestUrl = URLS.misc.prettyUrls(`/${pathname}/`);
+
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
+
+      const start = Date.now();
+      const apiResponse = await fetch(requestUrl, {
+        next: {
+          revalidate: 0
+        }
+      });
+      const data = await apiResponse.json();
+      ({ results } = data);
+      const end = Date.now();
+      console.warn('Pretty url response time', end - start, requestUrl);
+
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      let pk;
+
+      if (matched) {
+        const pkRegex = /\/(\d+)\/$/;
+        const match = path.match(pkRegex);
+        pk = match ? parseInt(match[1]) : undefined;
+      }
+
+      prettyUrlResult = {
+        matched,
+        path,
+        pk
+      };
+
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
+
+    return prettyUrlResult;
+  };
+
+export async function generateMetadata({ params }: PageProps) {
+  let result: Metadata = {};
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const searchParams = Object.fromEntries(
+    new URLSearchParams(
+      decodeURIComponent(
+        prettyurl
+          .find((x) => x.startsWith('searchparams'))
+          ?.replace('searchparams%7C', '')
+      ) ?? {}
+    ).entries()
+  );
+
+  const prettyUrlResult = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!prettyUrlResult.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: prettyUrlResult.pk
+    },
+    searchParams
+  };
+
+  try {
+    if (prettyUrlResult.path.startsWith('/product/')) {
+      await import('@product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/group-product/')) {
+      await import('@group-product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/category/')) {
+      await import('@category/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/special-page/')) {
+      await import('@special-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/flat-page/')) {
+      await import('@flat-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 300;
+
+export default async function Page({ params }) {
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const urlSearchParams = new URLSearchParams(
+    decodeURIComponent(
+      prettyurl
+        .find((x) => x.startsWith('searchparams'))
+        ?.replace('searchparams%7C', '')
+    ) ?? {}
+  );
+
+  const searchParams = {};
+
+  for (const [key, value] of urlSearchParams.entries() as unknown as Array<
+    [string, string]
+  >) {
+    if (!searchParams[key]) {
+      searchParams[key] = [];
+    }
+    searchParams[key].push(value);
+  }
+
+  const result = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!result.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: result.pk
+    },
+    searchParams
+  };
+
+  if (result.path.startsWith('/category/')) {
+    const CategoryPage = (await import('@category/[pk]/page')).default;
+    return <CategoryPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/product/')) {
+    const ProductPage = (await import('@product/[pk]/page')).default;
+    return <ProductPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/group-product/')) {
+    const GroupProduct = (await import('@group-product/[pk]/page')).default;
+    return <GroupProduct {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/special-page/')) {
+    const SpecialPage = (await import('@special-page/[pk]/page')).default;
+    return <SpecialPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/flat-page/')) {
+    const FlatPage = (await import('@flat-page/[pk]/page')).default;
+    return <FlatPage {...commonProps} />;
+  }
+
+  return null;
+}

package/types/index.ts

@@ -70,6 +70,7 @@ export interface Currency {
 }
 
 export interface Settings {
+  usePrettyUrlRoute?: boolean;
   commerceUrl: string;
   redis: {
     defaultExpirationTime: number;
@@ -214,7 +215,7 @@ export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
   params: T;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {

package/utils/app-fetch.ts

@@ -41,7 +41,7 @@ const appFetch = async <T>(
     };
 
     init.next = {
-      revalidate: 60
+      revalidate: Settings.usePrettyUrlRoute ? 0 : 60
     };
 
     logger.debug(`FETCH START ${url}`, { requestURL, init, ip });

package/utils/generate-commerce-search-params.ts

@@ -1,11 +1,15 @@
 import logger from './log';
 
-export const generateCommerceSearchParams = (searchParams?: URLSearchParams) => {
+export const generateCommerceSearchParams = (searchParams?: {
+  [key: string]: string | string[] | undefined;
+}) => {
   if (!searchParams) {
     return null;
   }
 
-  const urlSerchParams = new URLSearchParams(searchParams);
+  const urlSerchParams = new URLSearchParams(
+    searchParams as Record<string, string>
+  );
 
   Object.entries(searchParams).forEach(([key, value]) => {
     if (typeof value === 'object') {

package/utils/index.ts

@@ -102,6 +102,12 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
     ''
   );
 
+  const noOptionFileExtension = url?.split('.').pop()?.toLowerCase() ?? '';
+
+  if (noOptionFileExtension === 'svg' || noOptionFileExtension === 'gif') {
+    return url;
+  }
+
   let options = '';
 
   if (config) {

package/with-pz-config.js

@@ -8,6 +8,7 @@ const defaultConfig = {
   transpilePackages: ['@akinon/next', ...pzPlugins.map((p) => `@akinon/${p}`)],
   skipTrailingSlashRedirect: true,
   poweredByHeader: false,
+  cacheMaxMemorySize: 0,
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
   },
@@ -65,7 +66,12 @@ const defaultConfig = {
   }
 };
 
-const withPzConfig = (myNextConfig = {}) => {
+const withPzConfig = (
+  myNextConfig = {},
+  options = {
+    useCacheHandler: false
+  }
+) => {
   let extendedConfig = deepMerge({}, defaultConfig, myNextConfig);
 
   const originalPzHeadersFunction = defaultConfig.headers;
@@ -91,6 +97,10 @@ const withPzConfig = (myNextConfig = {}) => {
     return [...pzRewrites, ...myRewrites];
   };
 
+  if (options.useCacheHandler) {
+    extendedConfig.cacheHandler = require.resolve('./lib/cache-handler.mjs');
+  }
+
   return extendedConfig;
 };