DEV Community

How To Create A Blog With NextJS

Paulund on April 08, 2024

In this tutorial, we will walk through the steps to create a blog with NextJS. Set up a NextJS project First, make sure you have Node.j...
Read full post
Collapse
 
mattlewandowski93 profile image
Matt Lewandowski •

Another great option is using MDX. This allows you to map the markdown components to your design system. Really useful when you are using a lot of images or internal links and want to make use of the NextJS <Image/> or <Link/> components etc.

For example

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
    h1: ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>,
    img: (props) => (
      <Image
        sizes="100vw"
        style={{ width: '100%', height: 'auto' }}
        {...(props as ImageProps)}
      />
    ),
    ...components,
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
paulund profile image
Paulund •

I like that idea, thanks Matt

Collapse
 
sketter1969 profile image
sketter1969 •

very good