Ways of use: Next.js <Image>
<Image> is a particular element of Next.js framework that is very similar with the regular HTML <img> element. However, it needs some configurations before work properly.
Since all icons are .svg files that comes from https://devapix.vercel.app/, we need to pass that information to next.config file, which can have .js or .mjs as extension.
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
dangerouslyAllowSVG: true,
remotePatterns: [
{
protocol: 'https',
hostname: 'devapix.vercel.app',
port: ''
}
]
}
}
export default nextConfigDouble click to copy
After that it will be possible to use <Image> element to display the requested icon.
page.jsx
import Image from 'next/image'
export default function Page() {
return (
<div>
<h2>Next.js Logo</h2>
<Image
src='https://devapix.vercel.app/api?nextjs'
width={128}
height={128}
alt='Next.js logo'/>
</div>
)
}Double click to copy
The only property of API request that will have no effect by using <Image> element is size because width and height are required attributes of the element.
The workaround to this issue is to define the width or height in theses properties or by using style or className attributes.
Example using width and height
page.jsx
import Image from 'next/image'
export default function Page() {
return (
<div>
<h2>Next.js Logo</h2>
<Image
src='https://devapix.vercel.app/api?nextjs'
width={64}
height={64}
alt='Next.js logo'/>
</div>
)
}Double click to copy
Example using style
page.jsx
import Image from 'next/image'
export default function Page() {
return (
<div>
<h2>Next.js Logo</h2>
<Image
src='https://devapix.vercel.app/api?nextjs'
width={128}
height={128}
style={{ width: 64 }}
alt='Next.js logo'/>
</div>
)
}Double click to copy
Example using className
page.jsx
import Image from 'next/image'
import styles from './index.module.css'
export default function Page() {
return (
<div>
<h2>Next.js Logo</h2>
<Image
src='https://devapix.vercel.app/api?nextjs'
width={128}
height={128}
className={styles.icon}
alt='Next.js logo'/>
</div>
)
}Double click to copy
index.module.css
.icon {
width: 64px;
}Double click to copy
Both examples are equivalent to the API request below.
Request
https://devapix.vercel.app/api?nextjs&s=64