Nextjs/image library redirection if image greater than 5mb #80441
Description
Link to the code that reproduces this issue (open this in mobile safari)
https://github.com/Parthvsquare/vercel-banner-error
To Reproduce
Hello,
i have build nextjs website for my client.
In this we support subdomain and custom domain.
our whole website runs on subdomain. but for few clients we have to use rewrite custom domain (added using ns in vercel) to .orrderlo.de
website: https://www.lieferservice-mammamia.de/
old banner: https://assets-prod-gillz.s3.eu-central-1.amazonaws.com/33b87161-9bcc-43f5-8549-8728c87ae651/1744201050873_kMor8Ee.jpg
The old banner was 22mb we compressed it to 8.9mb, then 7.5mb then now 262kb.
only in mobile safari ios 18 browser it was constantly redirecting to itself. i tried to check developer tools from mac but i got nothing to debug.
we started to remove some components, then we found banner was the issue.
I even separated out middleware: https://vercel-banner-error.vercel.app/
(app/[subdomain]/(front)/page.tsx] landing page)
export const dynamic = 'force-dynamic';
export const revalidate = 0;
import CategoryDeals from '@/app/_components/category-deals';
import HeroSlider from '@/app/_components/hero-slider';
import {
fetchBanner,
fetchCategory,
fetchDeliveryTiers,
fetchItems,
} from '@/app/(lib)/common/endpoints';
import { getLocale } from 'next-intl/server';
export default async function Page({ params }) {
const banner = await fetchBanner(params.subdomain);
const menu = await fetchItems(params.subdomain);
const locale = await getLocale();
let categoryData = await fetchCategory(params.subdomain);
if (categoryData?.all) {
categoryData = {
...categoryData,
all: [...categoryData.all]/* .sort((a, b) => a.category_id - b.category_id) */,
};
}
const deliveryTiers = await fetchDeliveryTiers(params.subdomain);
return (
<>
{banner && banner.length > 0 && <HeroSlider banner={banner} lang={locale} />}
<CategoryDeals
menu={menu}
categoryData={categoryData}
subdomain={params.subdomain}
lang={locale}
deliveryTiers={deliveryTiers}
/>
</>
);
}
banner component
'use client';
import Image from 'next/image';
import Wrapper from './wrapper';
import { Button } from '@ui/components/button';
import CustomLink from '@/app/_components/custom-link';
import { cn } from '@ui/lib/utils';
interface BannerProps {
bgImage: string;
heading: string;
description: string;
ctaLink: string;
ctaName: string;
sideImage: string;
offerTitle: string;
}
const Banner = ({
bgImage,
heading,
description,
ctaLink,
ctaName,
sideImage,
offerTitle,
}: BannerProps) => {
return (
<div
className={cn(
'relative mt-20 h-[calc(100vh_-_560px)] min-h-[20rem] w-full sm:mt-0 sm:h-[calc(100vh_-_150px)] lg:min-h-[28rem]',
!sideImage && 'h-[calc(100vh_-_535px)]',
)}
>
<figure
className={cn(
'overlay absolute left-0 top-0 aspect-video h-full w-full',
sideImage && 'max-h-60 sm:max-h-screen',
)}
>
<Image
fill
alt="banner"
className="left-0 top-0 -z-10 object-cover object-left-top"
src={bgImage}
/>
</figure>
<Wrapper
customClass={cn(
sideImage
? 'sm:absolute top-0 pt-0 left-1/2 w-4/5 sm:-translate-x-1/2 h-full flex-col flex justify-center items-center md:pt-4 md:flex-row md:justify-between md:items-center'
: 'absolute top-0 left-1/2 w-4/5 -translate-x-1/2 h-full flex-col flex justify-center items-center',
)}
>
<div
className={cn(
'flex h-full basis-1/2 flex-col items-center justify-center text-center text-white md:items-start md:text-start',
sideImage && 'mt-0 sm:mt-4',
)}
>
{heading && (
<h2 className="md:page-title font-courgette text-2xl font-bold">
{heading /* || 'There is something wrong' */}
</h2>
)}
{
/* description && */ <p className="mt-2 text-sm sm:text-lg lg:mt-4">
{description /* || 'Wrong where you ask? Something is wrong in this world!' */}
</p>
}
{ctaName && ctaLink && (
<Button
asChild
className="z-10 mt-2 cursor-pointer rounded-md !py-0 px-8 text-base font-medium sm:py-2 md:mt-5 md:text-lg"
>
<CustomLink className="cursor-pointer" href={`/${ctaLink}`}>
{ctaName}
</CustomLink>
</Button>
)}
</div>
{sideImage && (
<div
className={cn(
'min-w-44 relative mt-0 w-1/2 !max-w-[330px] sm:mt-0 md:w-4/6 md:basis-2/5',
heading && description ? '-top-1 sm:top-auto' : '-top-3 sm:top-auto',
)}
>
<div className="bg-primary absolute left-0 top-0 z-10 flex h-[5rem] w-[5rem] flex-col items-center justify-center break-words rounded-full border-4 border-white text-center text-lg font-bold italic tracking-widest text-white md:h-32 md:w-32 md:text-2xl">
<span className="block w-[90%] text-sm md:text-lg">{offerTitle}</span>
</div>
<figure className="rotating-border relative aspect-square w-full overflow-hidden">
<Image
fill
alt="banner"
className="rounded-full border-8 border-transparent object-cover object-center"
src={sideImage}
/>
</figure>
</div>
)}
</Wrapper>
</div>
);
};
export default Banner;
Current vs. Expected behavior
next/image should atleast compress it, but for some reason only on ios mobile browser it was redirecting to itself and crashing website (on homepage only)
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:53:27 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6041
Available memory (MB): 24576
Available CPU cores: 12
Binaries:
Node: 22.16.0
npm: 10.9.2
Yarn: 1.22.19
pnpm: 10.3.0
Relevant Packages:
next: 14.2.28 // An outdated version detected (latest is 15.3.3), upgrade is highly recommended!
eslint-config-next: 13.4.1
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
Next.js Config:
output: N/A
⚠ An outdated version detected (latest is 15.3.3), upgrade is highly recommended!
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issueWhich area(s) are affected? (Select all that apply)
Image (next/image)
Which stage(s) are affected? (Select all that apply)
Vercel (Deployed)
Additional context
No response