Next.js Discord

Discord Forum

Best practices for local image storage and git

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hi! I'm new to Next and I understand the basics of next/image. It seems most useful when you're serving images off the SSR server. But I'd rather not store binaries in the code repository.

Would it be nuts to have a cron job periodically fetch images from cloud storage (like s3) and copy them into pubilc/images (for example)?

13 Replies

European sprat
You can configure remotePatterns in next.config.js to allow for images on S3/CDN to be served by your nextjs server using the image optimization https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
Polar bearOP
Thanks for responding, @European sprat . I'm probably missing something, but the docs say
Since Next.js does not have access to remote files during the build process, you'll need to provide the width, height and optional blurDataURL props manually.
I'd like to preserve these features.
European sprat
i'm not sure what you're trying to achieve or what your <Image> usage use case is
my public images are logos, icons, etc that get uploaded to s3 and served via cloudfront and i use the cloudfront URL in production. the remote patterns setting allows for them to be served to the Image component
Polar bearOP
Don't you need to specify the height and width props for the images to avoid layout shift?
European sprat
I have it set to the width and height that I want, yes
<Image src={getPublicAssetPath("logo.png")} alt="Logo" width={24} height={24} />
export default function getPublicAssetPath(path: string): string {
  let url = ""

  if (process.env.NODE_ENV === "production" && process.env.DEVELOPMENT != "1") {
    url = `https://${process.env.CDN_URL}/${process.env.BUILD_VERSION}/public`
  } else {
    url = process.env.BASE_PATH
  }

  return `${url}/${path}`
}
Polar bearOP
Right, I want next/image to do that for me.
The more I think about this, the less important that feature is. I was just curious if folks separate their locally served images from their code repo.
Thanks for the discussion, @European sprat