Next.js image hosting: a working next/image example

Step by step

1. 1. Allow the image source

   This example uses our own editor screenshot on swiftimg.com. Allow that exact path and the delivery paths used by your uploads. Restart Next.js after editing the config.

   // next.config.mjs
   export default {
     images: {
       remotePatterns: [
         { protocol: "https", hostname: "swiftimg.com", pathname: "/marketing/basic.png", search: "" },
         { protocol: "https", hostname: "i.swiftimg.com", pathname: "/**", search: "" },
       ],
     },
   };

2. 2. Render a real public image

   Save this complete component as app/page.tsx. The example image is 1392 × 745 pixels. After uploading your own image, use the returned directUrl and its actual width and height, not the viewer page URL.

   import Image from "next/image";
   
   export default function Page() {
     return (
       <main>
         <h1>Our image editor</h1>
         <Image
           src="https://swiftimg.com/marketing/basic.png"
           width={1392}
           height={745}
           alt="Swiftimg editor with crop, rotation and export controls"
           sizes="(max-width: 960px) 100vw, 960px"
           style={{ width: "100%", maxWidth: 960, height: "auto" }}
         />
       </main>
     );
   }

3. 3. Choose who optimizes the image

   Keep the default loader for Next.js optimization. For a pre-sized image, animated GIF, or static export without an optimizer, add unoptimized to Image. It then uses the source URL directly. Resize before upload with the free editor if needed. Do not put API keys or signing secrets in a client-side loader; advanced signed transforms must be generated on your server using the documented API.

   <Image
     unoptimized
     src="https://swiftimg.com/marketing/basic.png"
     width={1392}
     height={745}
     alt="Swiftimg image editor"
   />

4. 4. Check the result

   Open the page and inspect the image request in your browser Network panel. Default optimization uses /_next/image; unoptimized uses the source URL. A 400 response usually needs a remotePatterns check. A 404 needs the exact returned directUrl. A private image requires authorized access and is not a public embed. Verify the layout at narrow and wide screen sizes.

See also

• Image hosting for SvelteKit

  Reference swiftimg URLs from SvelteKit components and Markdown content. Permanent URLs, on-the-fly resize, and global delivery.

• Image hosting for Vue / Nuxt

  Configure @nuxt/image (or your own Vue component) to fetch from swiftimg. Permanent URLs, on-the-fly resize, and global delivery.

• Image hosting for Astro

  Reference swiftimg URLs from Astro's <Image /> component. Permanent URLs, automatic WebP variants, on-the-fly resize, and global delivery.

• swiftimg vs Cloudflare Images

  Compare swiftimg and Cloudflare Images: hosting workflows, editing, costs and migration.