post-content.js:

// post-content.js

import classes from "./post-content.module.css";
import MarkDown from "react-markdown";
import PostHeader from "./post-header";
import Image from "next/image";

function PostContent(props) {
  const { post } = props;
  const imagePath = `/images/posts/${post.slug}/${post.image}`;

  const customComponents = {
    img: function ImageComponent(image) {
      return (
        <div className={classes.image}>
          <Image
            src={`/images/posts/${post.slug}/${image.src}`}
            alt={image.alt}
            width={600}
            height={300}
          />
        </div>
      );
    },
  };

  return (
    <article className={classes.content}>
      <PostHeader title={post.title} image={imagePath} />
      <MarkDown components={customComponents}>{post.content}</MarkDown>
    </article>
  );
}

export default PostContent;

getting-started-with-nextjs.md:

---
title: "Getting Started with NextJS"
date: "2022-10-16"
image: getting-started-nextjs.png
excerpt: NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.
isFeatured: true
---

NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...

I wanted that whenever I come across the img element from the markdown, it should trigger the img method of customComponents, and return the Image component from next/image, but wrapped inside a div so I could apply certain styling. When I do this, it does render the image optimized correctly in the markdown content, but if I refresh it, an error is thrown:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching <div> in <p>.


<App>
  <Layout>
    <main>
      <PostDetailPage>
        <PostContent>
          <article>
            <Markdown>
              <p>
              ^^^
                <ImageComponent>
                  <div>
                  ^^^^^

if I remove the div wrapping, then it works, but of course the styling is not applied.