Error with MDX in Nextjs with components
Answered
Danna posted this in #help-forum
DannaOP
I'm trying to use a component for my MDX.
I get the following server when deploying to vercel - it works fine on
Said compoment:
I get the following server when deploying to vercel - it works fine on
run dev
Said compoment:
import Image from "next/image";
import Link from "next/link";
import lewakasicon from "@/images/Lewakas_Icon.png";
export default function Title({ children }: { children?: React.ReactNode }) {
return (
<h2 className="mb-3 text-xl font-medium tracking-tight sm:text-2xl">
{children}
</h2>
);
}
Answered by Danna
export default function CustomImage(
props: React.DetailedHTMLProps<
React.ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
>
) {
this 😆
18 Replies
DannaOP
the component at fault:
import Image from "next/image";
import Link from "next/link";
import lewakasicon from "@/images/Lewakas_Icon.png";
export default function CustomImage({ src, alt, height, width }) {
const imageProps = {
src,
alt,
height,
width,
layout: "responsive",
};
console.log(src);
return (
<div className="flex w-full my-6 rounded-2xl cursor-zoom-in aspect-[15/8] overflow-hidden align-middle justify-center items-center transition duration-200 after:pointer-events-none after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:bg-stone-400 after:bg-opacity-0 after:transition-colors after:duration-200 after:content-[''] ">
<div className="flex w-full h-full select-none rounded-2xl overflow-hidden ">
<Image
className="flex object-cover overflow-hidden h-full w-full"
src={src}
alt={alt}
width={1920}
height={1080}
/>
</div>
</div>
);
}
are you using
next/mdx
or something else?DannaOP
yeah, next mdx. but I just figured it out.
the props needs typisation for ts
I'm not sure if this will work:
the props needs typisation for ts
I'm not sure if this will work:
{ src, alt, height, width }: { src?: string, alt?: string, height?: string, width?: string}
especially this part:
<Image
className="flex object-cover overflow-hidden h-full w-full"
src={src ? src : ""}
alt={alt ? alt : ""}
width={1920}
height={1080}
/>
I have experience with contentlayer and this seemed like a contentlayer bug I had before that's why I asked
DannaOP
well, any idea how to create a custom image component with mdx? because the stuff above doesn't work
this is what I use for my blog
import Image from "next/image";
interface Props {
src: string;
alt: string;
caption: string;
}
export default function Img(props: Props) {
return (
<>
<figure className="md:-mx-5">
<Image
src={props.src}
alt={props.alt}
quality="100"
className="rounded-md border-2 border-stone-300 md:shadow-lg shadow-stone-300"
height={500}
width={800}
/>
<figcaption className="my-2 text-center font-sans text-stone-500">
{props.caption}
</figcaption>
</figure>
</>
);
}
but that's similar to yours
so It'll probably won't work
DannaOP
i will try
still fails
that's a messy error to debug, I'll look into it more in a few hours I have something to fix now
DannaOP
sure thing 👌
thanks
DannaOP
I think I managed to find a solution
DannaOP
export default function CustomImage(
props: React.DetailedHTMLProps<
React.ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
>
) {
this 😆
Answer
Or
props: React.ComponentProps<'img'>