I am trying to insert an image into my Next.js v.10 application using the new built-in Image component.
Here is the code:
import * as React from "react";
import Image from "next/image";
export const TestImage = () => {
return (
<Image
src="/images/dummy-rectangle-image.png"
alt="about"
unsized
/>
);
};
My images are located in the public/static/images folder.
next.config.js:
const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withBundleAnalyzer = require("@next/bundle-analyzer");
const nextRuntimeDotenv = require("next-runtime-dotenv");
const withConfig = nextRuntimeDotenv({ public: ["API_URL", "API_KEY"] });
const nextConfig = {
analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: "static",
reportFilename: "../bundles/server.html",
},
browser: {
analyzerMode: "static",
reportFilename: "../bundles/client.html",
},
},
publicRuntimeConfig: {
PROXY_MODE: process.env.PROXY_MODE,
API_URL: process.env.API_URL,
API_KEY: process.env.API_KEY,
STATIC_PATH: process.env.STATIC_PATH,
},
};
module.exports = withConfig(
withPlugins([[withCSS], [withSass], [withBundleAnalyzer]], nextConfig)
);
Result:
Request URL: localhost:3000/_next/image?url=%2Fimages%2Fblack-arrow.png&w=768&q=75
Status Code: 500 Internal Server Error
It seems something is wrong with the Next.js configuration to recognize the right path to the image. I read documentation tips but seems nothing helps in my case.
What is the right way for the usage of Image component in Next.js v.10?