Next.js gives you a server on every route, which is exactly where vehicle imagery belongs. Resolve the vehicle where you load the listing, hand the URL to next/image, and let ISR decide how often any of it runs again.
There is no client state to manage and no effect to write. The component that fetches your listing also resolves its images, and the browser receives finished markup with the URL already in place.
Four steps, one of which is a config file you edit once and forget.
npm i vehicleimagery, put the key in an environment variable, and add our image host to remotePatterns in next.config.
The same component that loads the listing resolves its vehicle and gets back URLs for every angle.
Pass the URL with explicit width and height. The optimizer handles srcset, and the fixed dimensions handle layout shift.
Vehicle imagery changes when your catalogue does, not per request. A revalidate window measured in hours is usually generous.
Bring vehicle imagery into your product without the heavy lifting. Clear docs, open SDKs and ready-made plugins connect to your stack in minutes, and our status page shows you live how the API is doing.
Our CDN caches the image, and your ISR cache holds the resolution result. Together they mean a busy vehicle detail page can serve thousands of visits without a single call leaving your server.
The most common mistake is treating vehicle imagery as a client concern in a framework that hands you a server for free. A useEffect in a card component works in development and then shows up in production as exposed credentials, a slower Largest Contentful Paint and a grid that reflows while data trickles in.
Resolving during render removes all three at once. The listing query and the image lookup happen in the same place, the result is cached by the same revalidation rules as the rest of the page, and next/image sees a normal remote URL. The integration ends up being a handful of lines in a file you were going to write anyway.
Yes. Add our image host to remotePatterns in next.config and the optimizer treats them like any other remote image.
Both. The app router is the better fit because resolution belongs in a server component, but a getServerSideProps or getStaticProps call works identically.
ISR, in almost every case. Vehicle imagery changes with your catalogue rather than per visitor, so a revalidate window of several hours is usually more than accurate enough.
Yes. The SDK uses fetch and has no Node specific dependencies, so edge route handlers and middleware work without a shim.
No. You can request the exact width you render and skip next/image entirely. The optimizer is convenient for srcset, not a requirement.
The response tells you when a fallback model year was used, so you can decide between showing it, showing a branded placeholder or hiding the image slot.
Tell us which routes show vehicles and what sizes they render. We come back with URLs and the remotePatterns entry you need.
