---
title: Intro to mdx-bundler with NextJs
description: In this blog post, I'll show you how to use mdx-bundler with NextJS
---

In this article, We'll see how to use mdx-bundler with Nextjs. MDX is the extension of markdown that allows us to write React Component inside markdown file. It helps us to make our content very interactive and dynamic. I got to know about the mdx-bundler package from Josh's blog [post](https://www.joshwcomeau.com/blog/how-i-built-my-blog/#using-mdx-with-nextjs). [Kent C Dodds](https://kentcdodds.com/) created this package. In my opinion, mdx-bundler gives Superpowers to mdx.

<Image src="https://media.graphcms.com/TcPG8vV2SWS1mdYSMZb7" caption="giphy" to="https://giphy.com/gifs/TOEIAnimationUK-dbz-dragon-ball-z-977YesTjNfQC7vQiph"/>

Let's have a deeper look into mdx-bundler, and I'll guide you through all the features of this package.

## Let's get started with mdx-bundler

mdx-bundler is an asynchronous function to compile and bundle our MDX files with their dependency. To compile mdx files, it uses XDM, a powerful MDX compiler with lots of features. mdx-bundler is best suited for the **SSR** framework. In this article, I'll be using NextJS.

To create a new NextJS project, run this command.

```bash
npx create-next-app@latest appname
 
or

yarn create next-app appname
```

Now run the following command to install mdx-bundler

```bash
npm install --save mdx-bundler esbuild

or 

yarn add mdx-bundler esbuild
```

To compile and bundle our MDX files, we need to use the **bundleMDX** function in this package. It takes two parameters, the first parameter is our MDX code in a string format, and the second parameter accepts an options object.

```jsx line=1,19-31
import {bundleMDX} from 'mdx-bundler'

const mdxSource = `
---
title: Example Post
published: 2021-02-13
description: This is some description
---

# Wahoo

import Demo from './demo'

Here's a **neat** demo:

<Demo />
`.trim()

const result = await bundleMDX(mdxSource, {
  files: {
    './demo.tsx': `
import * as React from 'react'

function Demo() {
  return <div>Neat demo!</div>
}

export default Demo
    `,
  },
})

const {code, frontmatter} = result
```

To render the bundled MDX code, we need to import **getMDXComponent** in the client

```jsx line=2,6,15
import * as React from 'react'
import {getMDXComponent} from 'mdx-bundler/client'

function Post({code, frontmatter}) {

  const Component = React.useMemo(() => getMDXComponent(code), [code])

  return (
    <>
      <header>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.description}</p>
      </header>
      <main>
        <Component />
      </main>
    </>
  )
}
```

Check out this [link](https://github.com/kentcdodds/mdx-bundler#options) to find all available options.

Most of the mdx blogs are using local mdx files to store their blog contents. In my case, I'm using GraphCMS to store the mdx data. If you don't know what GraphCMS is? [Check out my blog post](https://www.janasundar.dev/posts/how-i-built-my-blog-with-nextjs) where I explain how to get started with it.

Now we have the basic idea to use mdx-bundler. Let's breakdown down the code, and I'll guide you on how I used mdx-bundler in this blog.

```jsx line=3-7,14-19
export const getStaticProps = async (context) => {

  if (process.platform === 'win32') {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'esbuild.exe');
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'bin', 'esbuild');
  }

  const { slug } = context.params;

  const post = await getSinglePost(slug);

  const result = await bundleMDX(post.content, {
    xdmOptions(options) {
      options.rehypePlugins = [...(options.rehypePlugins ?? []), rehypeMdxCodeMeta];
      options.remarkPlugins = [...(options.remarkPlugins ?? []), gfm, emoji];
      return options;
    },
    ...(post.files ? { files: post.files } : {}),
  });

  return {
    props: {
      ...result,
    },
  };
};
```

Sometimes Nextjs don't find the exact path of esbuild. Due to this reason, We might get this **ENOENT(Error No Entry)** error. To resolve this issue, we are manually adding the executable path.

```jsx
 if (process.platform === 'win32') {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'esbuild.exe');
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'bin', 'esbuild');
  }
```

#### Reference
- [https://www.alaycock.co.uk/2021/03/mdx-bundler#esbuild-executable](https://www.alaycock.co.uk/2021/03/mdx-bundler#esbuild-executable)

To add the custom remark and rehype plugins to our bundler, use the xdmOptions object to achieve this behavior.

```jsx
 xdmOptions(options) {
      options.rehypePlugins = [...(options.rehypePlugins ?? []), rehypeMdxCodeMeta];
      options.remarkPlugins = [...(options.remarkPlugins ?? []), gfm, emoji];
      return options;
 }
```

<Callout type="info">
Want to create a custom plugin? Check this post where [Pedro Duarte](https://ped.ro/blog/code-blocks-but-better) explained everything in detail.
</Callout>

#### Reference
- [https://github.com/rehypejs/rehype/blob/main/doc/plugins.md](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md)
- [https://github.com/remarkjs/remark/blob/main/doc/plugins.md](https://github.com/remarkjs/remark/blob/main/doc/plugins.md)

The main difference between mdx-bundler and other libraries are most of the library does not bundle mdx code. They also don't have the option to add the dependency to our mdx code. We can achieve this dependency import feature using both files and the CWD option. In this blog, I used files to add the dependency code.

```jsx
...(post.files ? { files: post.files } : {}),
```

I hope that you have learned how to use mdx-bundler with Nextjs. Thanks for reading ✌️ and if you enjoyed this article, share it with your friends and colleagues.

---

In this blog post, I'll show you how to use mdx-bundler with NextJS

Intro to mdx-bundler with NextJs

---
title: How to generate dynamic open graph images
description: A short post on how to generate dynamic open graph images using puppeteer-core and chrome-aws-lambda
---

## Introduction

In this article, we will see how to generate dynamic open graph images. You might be wondering what an open graph image is? Whenever you share a link in Twitter, Discord, or other applications. A fancy card image / link preview is displayed and that image is called an open graph image / OG image.

### Requirements

To generate an OG image, we'll be using these npm packages.

- [puppeteer-core](https://www.npmjs.com/package/puppeteer-core)
- [chrome-aws-lambda](https://www.npmjs.com/package/chrome-aws-lambda)
## Installing Requirements

Do you have [yarn](https://yarnpkg.com/getting-started/install)? If not, then install it and run the below command or else use npm

`bash:yarn add puppeteer-core chrome-aws-lambda`

## Creating your OG Image

Before creating this function, If you're planning to deploy this project in vercel. I'll suggest everyone create a separate project. Otherwise, we may face this issue :point_down:

<Callout type="error">
 If we integrate this function with our existing project and deploy it in vercel. There is a chance that we might get an error message that the serverless function dependency package compressed size exceeds 50Mb, and then it stops the deployment process.
</Callout>

![Screenshot 2021-10-16 at 3.14.28 PM.png](https://media.graphcms.com/ZUmY9fUTRcKPOWOAKTsH)

To get an idea, we'll see how our final output looks like

[https://og-image.janasundar.dev/api/ogimage?title=How i built my blog with Next Js&tags=javascript,jsx,nextjs](https://og-image.janasundar.dev/api/ogimage?title=How%20i%20built%20my%20blog%20with%20Next%20Js&tags=javascript,jsx,nextjs)

![Screenshot 2021-10-17 at 4.41.13 PM.png](https://media.graphcms.com/QkWoqJXlQ66SIh3hsjWE)

From the above Url and image, we understand that the dynamic data are passed as the query parameters to generate an image.

So now we need a function that takes a screenshot of our content and passes it as a response. This can be achieved as follows

```js
import { getContent, getCss } from '../../utils/getContent';
import puppeteer from 'puppeteer-core';
import chrome from 'chrome-aws-lambda';

let page;

const isDev = process.env.NODE_ENV === 'development';

const exePath =
  process.platform === 'win32'
    ? 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
    : process.platform === 'linux'
    ? '/usr/bin/google-chrome'
    : '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';

export const getPage = async () => {
  if (page) {
    return page;
  }

  const getOptions = async () => {
    let options;
    if (isDev) {
      options = {
        args: [],
        executablePath: exePath,
        headless: true,
      };
    } else {
      options = {
        args: chrome.args,
        executablePath: await chrome.executablePath,
        headless: chrome.headless,
      };
    }

    return options;
  };

  const options = await getOptions();
  const browser = await puppeteer.launch({
    ...options,
  });
  page = await browser.newPage();

  return page;
};


export default async function handler(req, res) {
  const { title, tags, handle, logo, debug, fontFamily, background, fontFamilyUrl } = req.query;

  const css = getCss(fontFamily, fontFamilyUrl, background);
  const html = getContent(tags, title, handle, logo, css);

  if (debug === 'true') {
    res.setHeader('Content-Type', 'text/html');
    res.end(html);
    return;
  }

  try {
    const page = await getPage();
    await page.setViewport({ width: 1200, height: 630 });
    await page.setContent(html, { waitUntil: 'networkidle2', timeout: 15000 });

    await page.evaluateHandle('document.fonts.ready');

    const buffer = await page.screenshot({ type: 'png' });

    res.setHeader('Cache-Control', `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`);
    res.setHeader('Content-Type', 'image/png');
    res.end(buffer);

  } catch (error) {
    console.error(error);

    res.statusCode = 500;
    res.setHeader('Content-Type', 'text/html');
    res.end('<h1>Internal Error</h1><p>Sorry, there was a problem</p>');
  }
}
```
Let's take a closer look at our code.

```js line=1,2,39-45 title=getPage
import puppeteer from 'puppeteer-core';
import chrome from 'chrome-aws-lambda';

let page;

const isDev = process.env.NODE_ENV === 'development';

const exePath =
  process.platform === 'win32'
    ? 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
    : process.platform === 'linux'
    ? '/usr/bin/google-chrome'
    : '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';

export const getPage = async () => {
  if (page) {
    return page;
  }

  const getOptions = async () => {
    let options;
    if (isDev) {
      options = {
        args: [],
        executablePath: exePath,
        headless: true,
      };
    } else {
      options = {
        args: chrome.args,
        executablePath: await chrome.executablePath,
        headless: chrome.headless,
      };
    }

    return options;
  };

  const options = await getOptions();
  const browser = await puppeteer.launch({
    ...options,
  });
  page = await browser.newPage();

  return page;
};
```
Our getPage function launches the browser and gives us a reference to the browser page. To take a screenshot, we're using the puppeteer-core and chrome-aws-lambda package. If you don't know what puppeteer and chrome-aws-lambda are. Refer to the official docs link in the reference section.

#### Reference

- [https://github.com/puppeteer/puppeteer#puppeteer-core](https://github.com/puppeteer/puppeteer#puppeteer-core)
- [https://github.com/alixaxel/chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda)
- [https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteer-vs-puppeteer-core](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteer-vs-puppeteer-core)

```js title=getCss
export const getAbsoluteURL = (path) => {
  const baseURL = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : 'http://localhost:3000';
  return baseURL + path;
};

export const getCss = (fontFamily, fontFamilyUrl, background) => {
  return `
    ${fontFamilyUrl ?? "@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=fallback');"}

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ${
      fontFamily ?? 'Nunito'
    }, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans','Helvetica Neue', sans-serif;
    color: white;
    }

    .container {
    width: 1200px;
    height: 630px;
    background: ${background ? background : `url(${getAbsoluteURL('/ogbackground.svg')})`};
    padding:3rem;
    margin:0 auto;
    display: flex;
    flex-direction:column;
    }

    .content {
    padding: 3rem 5rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    }

    .title {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 840px;
    flex: 1;
    margin:0 auto;
    text-align: center;
    }

    .title > h1 {
    font-size: 64px;
    line-height: 74px;
    font-weight: 600;
    font-style: normal;
    
    }

    .logo {
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 1rem 3rem;
    }

    .tags {
    font-size: 1rem;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 2rem 0;
    }

    .pill{
      background: #caa8ff33;
      color: white;
      padding: 0.25rem 1rem;
      border-radius: 50rem;
      text-transform: capitalize;
      box-shadow: 0 0 1rem rgba(0,0,0,0.1);
      font-weight: bold;
    }

    .handle{
      font-size: 24px;
      font-weight: 600;
    }

    `;
};
```
Our getCss function gets all the styles of our og card. It'll take three optional parameters to generate CSS.

```js title=getContent
export const getContent = (tags, title, handle, logo, css) => {
  return `
    <html>
    <meta charset="utf-8">
    <title>Generated Image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
       ${css}
    </style>
    <body>
        <div class='container'>

        <div class="content">
            <div class="title"><h1>${title ?? 'Welcome to this site'}</h1></div>
            ${
              tags
                ? `<div class="tags">
                  ${tags
                    .split(',')
                    .map((tag) => {
                      return `<span key=${tag} class="pill">${tag}</span>`;
                    })
                    .join('')}
                </div>`
                : ''
            }
            
        </div>
        <div class="logo">
            <img src="${logo ?? getAbsoluteURL(`/logo.svg`)}" alt="logo" width="100px" height="100px" >
            <div class="handle">${handle ?? '@Jana__Sundar'}</div>
        </div>
        </div>
    </body>
    </html>`;
};
```
Our getContent function generate Html based on the CSS, title, twitter handle, logo, and tags.

Generally, the most recommended dimensions to generate an OG image is 1200 x 630. These are not the perfect values. Check this link to find the different recommendations.

#### Reference

- [https://iamturns.com/open-graph-image-size/](https://iamturns.com/open-graph-image-size/)

```js title=screenshot line=2,3,5,8
const page = await getPage();
await page.setViewport({ width: 1200, height: 630 });
await page.setContent(html, { waitUntil: 'networkidle2'  });
await page.evaluateHandle('document.fonts.ready');
const buffer = await page.screenshot({ type: 'png' });
res.setHeader('Cache-Control', `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`);
res.setHeader('Content-Type', 'image/png');
res.end(buffer);

} catch (error) {
console.error(error);
res.statusCode = 500;
res.setHeader('Content-Type', 'text/html');
res.end('<h1>Internal Error</h1><p>Sorry, there was a problem</p>');
}
```

Now, we need to pass the generated Html to the set content function then take a screenshot by calling the screenshot function from puppeteer with filetype. Return the buffer value from the screenshot and send it as a response.

#### Reference

- [https://phiilu.com/generate-open-graph-images-for-your-static-next-js-site](https://phiilu.com/generate-open-graph-images-for-your-static-next-js-site)
- [https://github.com/vercel/og-image](https://github.com/vercel/og-image)

This project is [open-source](https://github.com/JanaSundar/og-image) on GitHub. Have a closer look if you want.

Hopefully, you have learned how to generate a dynamic OG image. If you have any doubts, you can reach me at mailtojanasundar@gmail.com. Thanks for reading ✌️ and if you enjoyed this article, share it with your friends and colleagues.

_______









A short post on how to generate dynamic open graph images using puppeteer-core and chrome-aws-lambda

How to generate dynamic open graph images

---
title: How I built my blog with NextJs
description: Want to build an interactive blog? Let's look at the design decisions and libraries that you need to build it, one component at a time.
---
## Introduction

In this article, I'll guide you through all the tools and packages that I used in this blog. I'll also provide all the blog post links that I used as reference while creating this blog.

The Tech Stack used in this blog are NextJs, Chakra UI, MDX, Graph CMS

## Next Js

Next Js is a react framework that offers SSG(static site generation) and SSR(server-side rendering).

[SSG](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) is used to create a static page. These pages are prefetched during the build time and use the static page until the next build. Pages like about us, contact us, and blog posts.

[SSR](https://nextjs.org/docs/basic-features/pages#server-side-rendering) is a technique where we process web pages on a server by prefetching after which the rendered HTML is passed to the browser. SSR allows our webpage to load quickly and increases user experience. SSR helps to increase the SEO scores as well.

#### Reference
[Next.js by Vercel - The React Framework](https://nextjs.org/)

## Chakra UI

I used Chakra UI to style everything. It is a customisable, and reusable component-based library for reactjs. It follows the [WAI-ARIA guidelines](https://www.w3.org/WAI/standards-guidelines/aria/). Let's look at how to install and configure Chakra UI 

#### Installing Chakra UI

If you don't have a yarn package manager installed, install it by going to official [site](https://yarnpkg.com/). Once you have it installed, run the below command to install Chakra UI

`bash:yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion`

#### Configuring Chakra UI

After installing the chakra UI and its dependencies, we need to wrap our parent component with **ChakraProvider** component. Now, all the components present inside our parent can access the chakra UI components.

```tsx line=1,4,6 title="pages/_app.tsx"
import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
return (
	<ChakraProvider>
		<Component {...pageProps} />
	</ChakraProvider>
	)
}
export default MyApp
```

#### Creating custom themes

To override the default theme, we need to import the **extendTheme** function from **@chakra-ui/react** package.

```ts title="styles/theme.ts"
import { extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      900: "#1a202c",
    },
  },
})

export default theme
```

Then import the custom theme from the **theme.js** file to **_app.js** and pass the new theme to chakraProvider

```tsx line=1
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>
```

Now these custom themes are available in your component.

```tsx
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}
```
## MDX

MDX is the extension of markdown that allows you to write React Component inside markdown file. Markdown is a markup language with plain text formatting syntax. It flawlessly converts text to HTML.

The data for the blog posts are written in markdown and served from [GraphCMS](https://graphcms.com/). I used [mdx-bundler](https://github.com/kentcdodds/mdx-bundler) to compile the mdx code. [Josh Comeau](https://www.joshwcomeau.com/) recommended this package in his [blog post](https://www.joshwcomeau.com/blog/how-i-built-my-blog/#using-mdx-with-nextjs).

To compile the MDX code, we need to import the bundleMDX function from mdx-bundler. As a result, we'll get the code and frontmatter of the MDX file. It has inbuilt support for xdm configuration. It allows us to use the remark and rehype plugins.

```ts
import {bundleMDX} from 'mdx-bundler'

bundleMDX(mdxString, {
  xdmOptions(options) {
    options.remarkPlugins = [...(options.remarkPlugins ?? []), myRemarkPlugin]
    options.rehypePlugins = [...(options.rehypePlugins ?? []), myRehypePlugin]
    return options
  },
})
```

To use the bundled MDX, we need to import the getMDXComponent function from mdx-bundler/client.

```tsx line=4
import {getMDXComponent} from 'mdx-bundler/client'
function MDXPage({code}) {
  const Component = React.useMemo(
    () => getMDXComponent(result.code),
    [result.code],
  )

  return (
    <main>
      <Component />
    </main>
  )
}
```
Let's look at the live code component used in this blog posts. It allows our react component to render in the browser. I'm using [react live](https://github.com/FormidableLabs/react-live) package to achieve this live rendering.
It looks like this

```jsx live=true
function Counter({ initialCount = 0 }) {
  const [count, setCount] = React.useState(initialCount);
  return (
  <>
    <button type="button" onClick={() => setCount((prevCount) => prevCount - 1)} style={{padding:"0 1rem"}}>
      -
    </button>
    {count}
    <button type="button" onClick={() => setCount((prevCount) => prevCount + 1)} style={{padding:"0 1rem"}}>
      +
    </button>
  </>
  );
}
```
#### Reference
[https://github.com/kentcdodds/mdx-bundler](https://github.com/kentcdodds/mdx-bundler)

## Graph CMS

Graph CMS is the headless CMS based on GraphQL Content API and delivers your content across platforms. The data for the blog posts are coming from Graph CMS. It has a lifelong free personal account with sufficient amount of data transfer limit. For further reference regarding pricing, visit the [pricing page](https://graphcms.com/pricing).

#### Getting Started With Graph CMS

Now, we will create a new project and assign it the name and description.  Then set the region near to you. It's where our content will be. 
    <Image src="https://media.graphcms.com/P7gYD0peSfy9wyr00XS1" alt="create new project" />

Graph CMS sets all the project dependencies, and it'll take us to the dashboard page. For creating a new model, navigate to the schema section and click the add button to add a new Model. Inside the model, we need to add all the fields.
    <Image src="https://media.graphcms.com/rcKG6YpwTrGsxVAuax0z" alt="create new schema" />
    
Now, we can start adding the content for our created model by navigating to the content section.  By Clicking a create item button, we'll add new content for our model.
   <Image src="https://media.graphcms.com/TcPtRITMWt0dIRnXlAAZ" alt="Add Content to Schema" />
 
Add assets to our model, use the asset model it is the default system model present in the CMS. It supports all file formats. 
   <Image src="https://media.graphcms.com/ubCs0unTz65sxTafwPg2" alt="Add assets to assets schema" />
    
To access data from API call, go to the endpoints section, which is present inside settings, then add data access permissions.
    <Image src="https://media.graphcms.com/NrbxDuSDQUKFdJaVT1g4" alt="API Access Endpoint" />

To fetch the data, copy the content API URL to access content from the graphQL call.
    <Image src="https://media.graphcms.com/h972OM1bSwOCFrdWpzZi" alt="API Access Endpoint URL" />
    
Pass the content URL to graphQL client to query data from Graph CMS. It looks like this

```graphql
const client = new GraphQLClient(process.env.GRAPH_CMS_CONTENT_API);

const query =gql`
    query Posts($slug: String!) {
	post(where: { slug: $slug }) {
	    content
		files
		    tags {
			   tag	
			}	
		}	
	}
`;

const { post } = await client.request(query, { slug });
```

#### Reference
https://www.hostinger.in/tutorials/what-is-a-cms/
https://www.contentful.com/r/knowledgebase/what-is-headless-cms/

<Callout type="info" title="Thank you for inspiring me.">
Thanks to [Amelia Watternberger](https://wattenberger.com/), [Josh Comeau](https://www.joshwcomeau.com/), [Kent C Dodds](https://kentcdodds.com/), [Brad Traversy](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA), and [Maxime Heckel](https://maximeheckel.com/) for inspiring me to create my blog. 
</Callout>

Want to build an interactive blog? Let's look at the design decisions, project structure, and libraries that you need to build it, one component at a time.

Hi, I'm Janarthanan 👋

My Posts

Intro to mdx-bundler with NextJs

How to generate dynamic open graph images

How I built my blog with NextJs