Using next/image

Before we can use next/image, we'll need to configure our app to allow images sourced from our S3 bucket. We can do this by editing our next.config.js.

// next.config.js

module.exports = {
  images: {
    domains: [

Next, we'll need to find the height and width of uploaded images. It's best to capture these dimensions during the upload process.

This package ships with a getImageData helper that gives you the height and width of an image file. Here's an example of its usage.

import { useState } from 'react';
import { useS3Upload, getImageData } from 'next-s3-upload';
import Image from 'next/image';

export default function UploadTest() {
  let [imageUrl, setImageUrl] = useState();
  let [height, setHeight] = useState();
  let [width, setWidth] = useState();
  let { FileInput, openFileDialog, uploadToS3 } = useS3Upload();

  let handleFileChange = async file => {
    let { url } = await uploadToS3(file);
    let { height, width } = await getImageData(file);

  return (
      <FileInput onChange={handleFileChange} />

      <button onClick={openFileDialog}>Upload file</button>

      {imageUrl && (
          <Image src={imageUrl} width={width} height={height} />

These height and width values can be saved to your database alongside the URL of the image.

Things to know

When using next/image with files uploaded to S3 you'll want to be sure that your bucket policy only allows images to be uploaded, otherwise you could create a possible XSS vector.

The getting started guide shows you how to setup a policy that only allows image files to be uploaded.