Static Image Imports Places Duplicate Images In .next\server\chunks Folder #26607
Description
What version of Next.js are you using?
11.0.1
What version of Node.js are you using?
v14.15.4
What browser are you using?
Brave
What operating system are you using?
Windows 10
How are you deploying your application?
Vercel
Describe the Bug
When using static image imports on pages that are rendered using Server or SSG, for images that are located in the components directory, the image assets are placed in two locations:
- Server:
.next\server\chunks\static\image\components\... - Static:
.next\static\image\components\...
For sites with lots of image imports on pages that are SSG or Server rendered, this can result in .next/server/chunks getting very large and for platforms like Vercel, builds will fail as the chunks director is greater then 50MB Compressed or 250MB Uncompressed.
Expected Behavior
Image assets should only be placed in the static folder as next/image does not reference images in the server location.
To Reproduce
- Create a Next.JS Project
- Create a component in the
./componentsfolder - Add an image in that same folder
- In the newly created component, add
next/imagecomponent and reference the image you just added - build the project
Example Component
import * as React from "react";
import NextImage from "next/image";
import quarry from "./quarry.png";
export type DuplicatorProps = {
id: string;
};
const Duplicator: React.FC<DuplicatorProps> = (props) => {
return (
<div>
<h1>Hello {props.id}</h1>
<NextImage src={quarry} width={100} height={100} />
</div>
);
};
export default Duplicator;
Folder Structure of Components & Image Assets:
Example Output
Static Location
Server Location
