Static File Serving
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.
How static file serving works
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.
Best practices
- Don't rename the /public directory as it's the only directory used to serve static files. You can add subdirectories, like /public/docs
CSS background images
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
Images that are part of a page or component's content (for example, product
images), should always be rendered with the '@graphcommerce/image'
Image component. This will benefit performance, due to the component's
features such as CDN-caching, srcset, and viewport loading.
Next steps
- Learn more about Next.js static file serving ↗ in the Next.js docs
- Learn how to modify your GraphCommerce app's favicon