Next.js Discord

Discord Forum

Images Not Copied from Public on Build

Unanswered
VoidPointer posted this in #help-forum
Open in Discord
I have images in public/logos and public/gallery, and all is working locally, but when I deployed to Firebase AppHosting, I found I was getting 404s for images from public/logos, but images from public/gallery were working. The gallery images I load in a server side page:
export default async function GalleryPage() {
    const images = await getImages();
    return <PhotoGallery images={images} />;
}

while the images in logos I use in client side components like this one:
export function SiteHeader() {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <header className="fixed top-0 left-0 w-full bg-gray-800 text-white z-50 shadow-md">
            <nav className="max-w-7xl mx-auto px-4 h-16 flex justify-between items-center">
                <div className="text-xl font-bold">
                    <Link href="/" className="flex items-center gap-2 group">
                        <Image
                            src="/logos/logo-round.jpg"
                            alt="Panda Guards"
                            width={32}
                            height={32}
                            className="rounded-full aspect-square object-cover"
                        />
                        <span>Panda Guards</span>
                    </Link>
                </div>
...

After a tortuois session asking Gemini about these 404s, I eventually ended up adding output: "standalone" to my nexr.config.ts, becuse apparently Firebase needs that, but I actually doubt it, but anyway, this revealed that after running next build , only public/gallery was copied to .next/standalone, so standalone or not, it seems the build process is igoring the one public folder. Why is this?

2 Replies

@@ts-ignore you need to copy the items manually. https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
I disagree strongly that I should have to copy anything manually into a build folder, especially when I don't control the build process on my hosting, as with Firebase App Hosting. But thanks for the pointer, it looks like some good reading, but for now all I did was nest the image folder that wasn't getting copied under the one that was getting copied. However, nothing in that article indicates I shoud manually copy anything either.

I'm still very curious, though, as to why only the one folder gets copied auotmatically. I even tried using one of the missed images in my root layout, to force it to be traced, but still only the other folder got copied.