Skip to content
Announcing the Appwrite X MongoDB partnership
Start building
Back

NextJS and Appwrite storage images

  • 0
  • Storage
View on Discord
Maastonakki
3 Jun, 2025, 13:32

I'm trying to work as much server-side rendered (SSR) NextJS application as possible, along with appwrite as backend. I've managed to create image upload for users, but now I'm strugling how to properly view/fetch images for users.

I've created both abstracted session clients for client-usage and server-usage. I found from documentation that you're able to get appwrite storage image link with WEB appwrite-package with storage.getFilePreview-method. Thou NextJS <Image> component can't really handle that, and after all, they both do kind of same job (image optimization).

I wounder if I should just fallback to use regular <img>-tag for my images and make all images client component, which retrieves image URL with appwrite-WEB-SDK, or is there some more convient way to fetch images from storage, to use NextJS <Image> component?

TL;DR
Developers are struggling to properly view/fetch images for users in an SSR NextJS application with Appwrite as the backend. The NextJS `<Image>` component does not work well with Appwrite storage image links. One solution could be to use a regular `<img>` tag to retrieve image URLs with the Appwrite WEB-SDK for now.
Reply

Reply to this thread by joining our Discord

Reply on Discord

Recommended threads

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more