next-strapi-image-loader
This custom image loader seamlessly integrates Strapi apps with Next.js, handling image optimization through Strapi.
Benefits
<Image src={getStrapiUrl(...)} />, It does it for you.
Getting Started
Install next-strapi-image-loader
yarn add next-strapi-image-loader
# or
npm install next-strapi-image-loaderModify your next.config.js
// next.config.js
const { NextStrapiImageLoader } = require("next-strapi-image-loader");
/** @type {import('next').NextConfig} */
const nextConfig = NextStrapiImageLoader.with({
reactStrictMode: true,
// Following options are default options
strapi: {
// Breakpoints from your Strapi app see https://docs.strapi.io/dev-docs/plugins/upload#responsive-images
breakpoints: {
large: 1000,
medium: 750,
small: 500,
},
// Public URL of your Strapi App
publicUrl: "http://localhost:1337",
// If you are hosting images locally or remotely, this option is used to tell
// next-strapi-image-loader to ignore those files
excludeOrigins: [],
excludeFiles: [],
},
});
module.exports = nextConfig;