When building your custom storefront, it can be useful to have access to static files not already hosted elsewhere, like images or text documents. This guide describes how to reference and serve static files in GraphCommerce.
Static files are files your app downloads from a server. Next.js serves static assets at the root path /. For example, you can create a file called public/icon.png and reference it in your code as /icon.png.
Product images are served from the Magento database, so you don't need to place those images in the /public directory.
CSS background images are common assets you would place in the /public directory. It's a good practice to limit these to .svg images.
If you need to use a .jpg file as part of the design, place them in the /public
directory but render them with the
'@graphcommerce/image' Image component.
This will benefit performance, due to the component's features such as
CDN-caching, srcset, and viewport loading.
Images that are part of a page or component's content (for example, product
images), should always be rendered with the
Image component. This will benefit performance, due to the component's
features such as CDN-caching, srcset, and viewport loading.