Introduction

Using an external file storage URL as a src in your NextJs project can be challenging, especially when you've not configured the URL. I found a way to navigate through this challenge using the steps I will share in this post.

In this post, I will walk you through the steps I used to address the challenges of using an external file storage (Supabase) URL in your NextJs project.

Why use Nextjs Image Component to Render Images?

NextJs provides an Image component that can handle optimizations out-of-the-box for a developer.

Images make up a significant amount of the page weight of a regular website and can significantly affect the LCP performance of your website.

See also: How to get started with front-end development.

The HTML element is enhanced by the Next.js Image component with the following characteristics for automatic image optimization, even if it is hosted by a CMS or another external data source.

1. It uses contemporary image formats like WebP and AVIF to automatically offer appropriately sized images for every device.
2. It stops the layout from changing while photos are loading which maintains visual stability.
3. Native browser lazy loading allows images to load only when they enter the viewport, with the ability to blur placeholders.
4. Resizing photos on demand, even when they are stored on distant servers, and still maintaining asset flexibility.

How to Load Image from Supabase Storage in Next.js using Image Loader Props .

Step1

In your next.config.js (if yours is in .mjs, change it to .js) add this code

The images object has a key loader with your supabase project URL as value

Step2

Create a utils.js file and create a supabaseLoader function and this code.

app/utils.js

The return https.. is your file storage URL. Make changes to following to match your file storage settings, bucket_name = storage_name and nested folder name (if any).

Step3

You can now use the supabase loader function with next/image in any file.

Import the supabaseLoader function and next/image.

ImageSrc is the URL from supabase storage.

With this method, Next.js optimizes the image on demand as users request them and it will render the image within 2.5 secs bellow the high Largest Contentful Paint 4.0 secs.

See Also: Build a FullStack Application with Next.js App Router and MongoDB

Conclusion.

NextJs ensures your website offers images that are optimized for different devices by using the loader functions when rendering images from external URLs.

The loader function will supply ({src}) source to dynamically generate picture URLs at various sizes.

The `srcset`attribute is then automatically created using this information, ensuring that users see the best possible picture size for their viewport, reducing needless data transmission, and speeding up load time.

The default loader serves images straight from the Next.js server, optimizing them from any web location via the built-in Image Optimization API of Next.js. You can, however, develop your loader function with a few lines of JavaScript code (same as above) if you would rather serve images straight from a custom image server or a Content Delivery Network (CDN).

Please Share.