Hi @inner ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#picture on assets folder
vast smeltBOT
In Next.js, static files like images should be stored in the public directory. The files inside the public directory can then be referenced in your code starting from the base URL (/).
If your image is in the assets folder, the structure should be /public/assets/. For example, if you have an image named logo.png in the assets folder, you can reference it in your code like this:
import Image from 'next/image'
export function Logo() {
return <Image src="/assets/logo.png" alt="Logo" width="64" height="64" />
}
If your image is currently in the /app/assets/ directory, you should move it to the /public/assets/ directory. The app directory in Next.js is used for routing and does not serve static assets.
Sources:
- Next.js Project Structure (https://nextjs.org/docs/getting-started/project-structure)
- Static Assets in
public(https://nextjs.org/docs/app/building-your-application/optimizing/static-assets) - Github Issue (closed): Gifs not loading- TypeError: unsupported file type: undefined (file: undefined) (https://github.com/vercel/next.js/issues/40704)