nextjs-starter
nextjs-starter copied to clipboard
[Question] Best way to export with images?
Hi, I'm not a next.js expert so I hope you'll forgive any stupid things I will ask :)
Currently it uses next export
to build the static website and it doesn't support the <img>
HTML tag.
So I replaced it with the next.js Image API:
import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';
import { projects } from '../utils/projectsData';
import Image from 'next/image';
const Home = () => (
<div className="home">
<Image
src="/images/logo-transparent.png"
alt="logo"
width={250}
height={118}
/>
<h1>What Can I Deploy to Static Apps?</h1>
...
But the next export
requires an Image optimizer service so I used a dummy one
import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';
import { projects } from '../utils/projectsData';
import Image from 'next/image';
// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
return src;
};
const Home = () => (
<div className="home">
<Image
src="/images/logo-transparent.png"
alt="logo"
width={250}
height={118}
loader={customLoader}
/>
<h1>What Can I Deploy to Static Apps?</h1>
...
That works but that's a pretty bad workaround I guess.
Is there an Azure service or another way to support static local images ?
Thanks !