rendering images in mdx posts about next-mdx HOT 13 CLOSED

Thanks Arshad, your a modern day genius! Works like a charm.

Now it's the best looking nextjs blog system out there. Cheers

from next-mdx.

The Image component is not available in MDX by default. You can pass it to MDX using components:

import Image from "next/image"

// A list of components to pass to MDX.
const mdxComponents = {
  Image,
}

export default function PostPage({ post }) {
  const content = useHydrate(post, {
    components: mdxComponents, <------------------
  })

  ...
}

export async function getStaticProps(context) {
  const post = await getMdxNode("post", context, {
    components: mdxComponents, <------------------
  })

  ....
}

You can then use it like this:

<Image src="/images/placeholder.png" alt="image alt text" layout="fill"  />

Doc: https://www.next-mdx.org/components

from next-mdx.

Thanks Arshad,

I've tried all afternoon but still cannot do this. i'm getting this:

Failed to compile.
--
20:34:13.917 | ./src/components/mdx-components.tsx:19:19
20:34:13.917 | Type error: Cannot find name 'useHydrate'.
20:34:13.917 | 17 \|
20:34:13.917 | 18 \|  export default function PostPage({ post }) {
20:34:13.917 | > 19 \|   const content = useHydrate(post, {
20:34:13.917 | \|                   ^
20:34:13.917 | 20 \|     components: mdxComponents, <------------------
20:34:13.917 | 21 \|   })
20:34:13.917 | 22 \|
20:34:13.940 | error Command failed with exit code 1.

Your next-mdx blog theme is great but as a blog, images are crucial. Would it be possible to update your theme with use with images please? maybe give me some dummy step by steps to add it, then everyone can add it.

Thanks, I would really appreciate your help, as i'm not really savvy with nextjs or typescript!

from next-mdx.

Oh I did not include the imports above. Here's what the file would look like with imports:

import { useHydrate } from "next-mdx/client"
import { getMdxNode, getMdxPaths } from "next-mdx/server"
import Image from "next/image"

// A list of components to pass to MDX.
const mdxComponents = {
  Image,
}

export default function PostPage({ post }) {
  const content = useHydrate(post, {
    components: mdxComponents, 
  })

  return (
    <article>
      <h1>{post.frontMatter.title}</h1>
      {post.frontMatter.excerpt ? <p>{post.frontMatter.excerpt}</p> : null}
      <hr />
      {content}
    </article>
  )
}

export async function getStaticPaths() {
  return {
    paths: await getMdxPaths("post"),
    fallback: false,
  }
}

export async function getStaticProps(context) {
  const post = await getMdxNode("post", context, {
    components: mdxComponents, 
  })

  if (!post) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      post,
    },
  }
}

from next-mdx.

Your next-mdx blog theme is great but as a blog, images are crucial. Would it be possible to update your theme with use with images please?

Agreed. Which starter/theme are you using?

from next-mdx.

Thanks Arshad, which file should this be entered into?

the starter i'm working with is the: https://github.com/arshad/next-mdx/tree/master/examples/example-blog

from next-mdx.

https://mdnext-reflexjs.vercel.app has the images showing but doesn't have categories, if this could be added, it would be great for others.

this reflexjs starter: https://nextjs-starter-blog-demo.vercel.app looks great and has everything included, but doesn't deploy to vercel for some reason. if a deploy button could be added, this could be a real winner

thanks for all your help

from next-mdx.

Thanks Arshad, which file should this be entered into?

If you're using the example-blog you can add it here: src/components/mdx-components.tsx.

This is where we define all the MDX components.

Your mdx-components.tsx file will look like this:

import { ButtonLink } from "@/components/button-link"
+ import Image from "next/image"

export const mdxComponents = {
  h2: (props) => <h2 style={{ color: "lightgreen" }} {...props} />,
  a: (props) => (
    <a color="primary" _hover={{ textDecoration: "underline" }} {...props} />
  ),
  hr: (props) => <hr {...props} />,
  p: (props) => <p variant="text.paragraph" {...props} />,
  ul: (props) => <ul variant="list.unordered" {...props} />,
  ol: (props) => <ol variant="list.ordered" {...props} />,
  strong: (props) => <strong fontWeight="semibold" {...props} />,
  inlineCode: (props) => <code color="primary" fontSize="xl" {...props} />,
  ButtonLink,
+ Image,
}

from next-mdx.

@depart-arrive did this work?

from next-mdx.

No, I'm afraid not Arshad, It just kept coming back with a build failure.

from next-mdx.

It looks a great design with the Reflexjs system, but with my limited technical skills It doesn't work for me. If yo could get the base repository to include it, I think a lot more people would find it useful.

from next-mdx.

Sure. I can do that. I'll update here when it's ready to test.

from next-mdx.

@depart-arrive done. I've added Image as an MDX component and fixed the issue with deployment.

Here's a page with an inline Image: https://nextjs-starter-blog-demo.vercel.app/about

I've also updated the Styleguide with an example: See next/image (scroll to the end of the page) on https://nextjs-starter-blog-demo.vercel.app/blog/styleguide

from next-mdx.