Next.js Discord

Discord Forum

Error with MDX in Nextjs with components

Answered
Danna posted this in #help-forum
Open in Discord
Avatar
DannaOP
I'm trying to use a component for my MDX.
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>
  );
}
Image
Answered by Danna
export default function CustomImage(
  props: React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  >
) {

this 😆
View full answer

18 Replies

Avatar
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>
  );
}
Avatar
Yusuf
are you using next/mdx or something else?
Avatar
DannaOP
yeah, next mdx. but I just figured it out.

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}
        />
Avatar
Yusuf
I have experience with contentlayer and this seemed like a contentlayer bug I had before that's why I asked
Avatar
DannaOP
well, any idea how to create a custom image component with mdx? because the stuff above doesn't work
Image
Avatar
Yusuf
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
Avatar
DannaOP
i will try
still fails
Image
Avatar
Yusuf
that's a messy error to debug, I'll look into it more in a few hours I have something to fix now
Avatar
DannaOP
sure thing 👌
thanks
Avatar
DannaOP
I think I managed to find a solution
Avatar
DannaOP
export default function CustomImage(
  props: React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  >
) {

this 😆
Answer
Avatar
joulev
Or props: React.ComponentProps<'img'>