---
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 what mdx and mdx-bundler are and how to use mdx-bundler with Next.js. What are the other alternatives to mdx-bundler, and how is it different?

## What is MDX?

MDX is the extension of Markdown that allows us to write React Component inside the markdown file. I assume that everyone knows about Markdown. If not, follow this [website](https://commonmark.org/help/) to get a basic understanding of Markdown.

The most widely used mdx compiler packages are

- [mdx-bundler](https://github.com/kentcdodds/mdx-bundler#mdx-bundler-)
- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
- [@next/mdx](https://www.npmjs.com/package/@next/mdx)

In this blog, I used mdx-bundler to compile and bundle my code sourced from [Graph CMS](https://hygraph.com/). MDX-bundler compiles and bundles our code with built-in support to frontmatter, but the next-mdx-remote package only compiles the code. It's just a compiler.

## What is MDX-bundler?

MDX-bundler is an asynchronous function to compile and bundle our MDX files with their dependency. MDX-bundler is best suited for the SSR framework with on-demand bundling.

Create a new [Next.js](https://nextjs.org/docs) project. Now we need to install mdx-bundler into our project.

```bash
# yarn 
yarn add mdx-bundler esbuild

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

Let's get started by adding a bundler. It's up to you whether you want to bundle the code on build time([SSG](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)) or every request([SSR](https://nextjs.org/docs/basic-features/pages#server-side-rendering)). In this blog, I bundled the code on build time with incremental static regeneration([ISR](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)) to revalidate the cache on every new update.

Now, we need to bundle our code. Import the `bundleMDX` function from the mdx-bundler package, then pass the required options. Check out this [link](https://github.com/kentcdodds/mdx-bundler#options) to find all the available options. There are two ways to pass source data to the bundle function. 

```js
bundleMDX({
  source: // mdxcode,
  /* or */
  file: // path to mdx file
})
```

The first way is to use the source property, and the other is to use the file property. In my case, I used the source property to pass the data.

```js
bundleMDX({
  source: /* mdx code */,
  mdxOptions(options, frontmatter) {
    options.remarkPlugins = [...(options.remarkPlugins ?? []), /* myRemarkPlugin */]
    options.rehypePlugins = [...(options.rehypePlugins ?? []), /* myRehypePlugin */]

    return options
  },
})
```

We have the mdx options property, which allows us to add remark/rehype plugins. With the help of this article from [Pedro](https://ped.ro/writing/code-blocks-but-better), I created a custom plugin to extract metadata from code blocks.

```ts
import { visit } from 'unist-util-visit';

const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;

export const rehypeMetaAttribute = () => {
  return (tree: any) => {
    visit(tree, 'element', visitor);
  };

  function visitor(node: any, index: any, parentNode: any) {
    let match;

    if (node.tagName === 'code' && node.data && node.data.meta) {
      re.lastIndex = 0; // Reset regex.

      while ((match = re.exec(node.data.meta))) {
        node.properties[match[1]] = match[2] || match[3] || match[4] || '';
        parentNode.properties[match[1]] = match[2] || match[3] || match[4] || '';
      }
    }
  }
};
```

Now pass this function to mdx options. In my case, this is a rehype plugin, so I'll pass it in the rehype options.

```js showLineNumbers=true line=4
mdxOptions(options) {
      options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        rehypeMetaAttribute,
      ];

      return options;
    }
```

Now, we need to use this bundled code on the client side. To do that, import the `getMDXcomponent` function from the mdx-bundler package. Use the `useMemo` hook from react to avoid intensive calculation on every render. In our case, we need to re-run the getMdxComponent function on code change. So we need to add the code string as a dependency. This function returns a component that helps us render the bundled code on the browser.

```js line=2,5,8 showLineNumbers=true
import * as React from 'react'
import { getMDXComponent } from 'mdx-bundler/client'

function MDXPage({code}: {code: string}) {
  const Component = React.useMemo(() => getMDXComponent(code), [code])

  return (
   <Component />
  )
}
```

With the help of mdx-bundler, we can now substitute components. For that, we need to pass components as a prop, and we can replace any components from here and add our custom components.

```js showLineNumbers=true
<Component
          components={{
            pre: CodeBlock,
            Callout,
          }}
        />
```

From the above snippet, we can see replacing the existing **pre** tag with our Custom styled `CodeBlock` and passing our custom components `Callout`.

And that's it. We successfully integrated mdx-bundler with Next.js. If you have any questions or comments, let me know on Twitter at [@jana__sundar](https://twitter.com/Jana__Sundar) or via email at [mailtojana23[at]gmail.com](mailto:mailtojana23@gmail.com). But until next time, happy coding!

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
---

You might probably think, what is an open graph? This article will show the open graph protocol and how to generate an open graph image for all pages with Next.js.

## What is an open graph?
You probably noticed that fancy images appear when you share an url on Facebook, slack or Whatsapp. Those images are called the open graph image, and Facebook created this protocol to use metadata to represent the page's content.

Here is an example of how open-graph metatags look like

```html
<meta property="og:title" content="How I built my blog with NextJs"/>
<meta property="og:description" content="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."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://janasundar.dev/"/>
<meta property="og:image" content="https://janasundar.dev/images/og/how-i-built-my-blog-with-nextjs.png"/>

```

I assume that everyone knows how to create a Next.js project. If not, then follow this [link](https://nextjs.org/docs/) to get started.

## Get Started with an open graph.

To generate an open graph image, we need to install these packages.

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

# npm
npm i chrome-aws-lambda puppeteer-core

```

To get an idea, we'll see what our final output looks like by navigating to this [url](https://og-image.janasundar.dev/?title=How%20I%20built%20my%20blog%20with%20Nextjs). We'll get a result like this

<Image src="https://media.graphassets.com/tlGpjJsSQmuXp8CZbO9D" alt="How I built my blog with NextJs" showBorder />

From the above output, we can understand the dynamic images are generated based on the url parameters. We need to add this logic to our website by accepting data from url parameters. 

In my case, I use tailwind css with Next.js, but you can use any css framework or custom css.

```tsx showLineNumbers=true line=18-20,23,24,26-28,
import { useRouter } from 'next/router';
import Head from 'next/head';
import React from 'react';

const colors = [
  'conic-gradient(at center bottom, rgb(159, 18, 57), rgb(229, 231, 235), rgb(252, 211, 77))',
  'conic-gradient(at left top, rgb(233, 213, 255), rgb(180, 83, 9), rgb(191, 219, 254))',
  'conic-gradient(rgb(14, 165, 233), rgb(3, 105, 161), rgb(237, 233, 254))',
  'linear-gradient(to right, rgb(254, 242, 242), rgb(255, 251, 235), rgb(30, 64, 175))',
  'radial-gradient(at right center, rgb(243, 232, 255), rgb(224, 231, 255), rgb(196, 181, 253))',
  'conic-gradient(at left center, rgb(6, 95, 70), rgb(255, 237, 213), rgb(194, 65, 12))',
  'conic-gradient(at left bottom, rgb(209, 250, 229), rgb(250, 204, 21), rgb(3, 105, 161))',
  'radial-gradient(at center bottom, rgb(6, 182, 212), rgb(199, 210, 254), rgb(30, 58, 138))',
  'conic-gradient(at right top, rgb(254, 205, 211), rgb(167, 139, 250), rgb(224, 242, 254))',
  'radial-gradient(at right bottom, rgb(212, 212, 212), rgb(94, 234, 212), rgb(244, 244, 245))',
];

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)];
}

export default function Home() {
  const router = useRouter();
  const searchParams = new URLSearchParams(router.asPath.split(/\?/)[1]);

  const title = searchParams.get('title');
  const background = searchParams.get('background');
  const color = searchParams.get('color');

  const [params, setParams] = React.useState({
    title: null,
    color: null,
    background: null,
  });

  React.useEffect(() => {
    setParams({
      title,
      color,
      background,
    });
  }, [title, color, background]);

  return (
    <>
      <Head>
        <title>JanaSundar</title>
      </Head>

      <div
        className={`w-[1200px] h-[630px] flex justify-center items-center`}
        style={{
          background: params.background ?? '#121212',
        }}>
        <h1
          className={`font-sans text-6xl leading-normal tracking-wide font-bold text-center w-9/12
          bg-clip-text text-transparent gradient-text`}
          style={{
            background: params.color ?? getRandomColor(),
          }}>
          {params.title}
        </h1>
      </div>
    </>
  );
}
```

Let's dive deeply to see what's happening in the above code.

First, we need to parse the url to get the data. To do that, import the router from next.js and pass the query params to the `URLSearchParams`. Now use the received data to render the ui per our needs. 

While creating an ui, the most recommended size for an og image is *1200 x 630*.

<Callout>
I separated my og image logic into two projects. One contains only the ui, and the other calls the ui to take a snap and store it locally. But it's up to you if you want to add both functionalities to the same project.
</Callout>

Things now we need to do,

- Navigate to our ui website with the required data.
- Take a screenshot of our content.
- Store it in our static folder.
- Create a script to generate an image on build time

All these points translate into this code.

```js line=7,10-15,18-32,49-59 showLineNumbers=true title=scripts/generate-og-image.js
const fs = require('fs');
const chrome = require('chrome-aws-lambda');
const puppeteer = require('puppeteer-core');
const { getAllPosts } = require('./getPost'); 
const { loadEnvConfig } = require('@next/env');

loadEnvConfig(process.cwd());

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';
const baseUrl = isDev ? 'http://localhost:3000' : 'http://janasundar.dev';

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;
};

(async () => {
  const posts = await getAllPosts();

  posts.forEach(async (post) => {
    const qs = new URLSearchParams({
      title: post.title,
    });
    const url = `${baseUrl}?${qs.toString()}`;
    const ogImageDir = `./public/images/og`;
    const imagePath = `${ogImageDir}/${post.slug}.png`;
    const options = await getOptions();

    const browser = await puppeteer.launch({
      ...options,
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1200, height: 630 });
    await page.goto(url, { waitUntil: 'networkidle2' });
    const buffer = await page.screenshot({ type: 'png' });
    await browser.close();

    fs.mkdirSync(ogImageDir, { __recursive__ : true });
    fs.writeFileSync(imagePath, buffer);
  });
})();
```

Let's dive deeper into our code to understand what is happening.

First, we need to get the executable path and options which help us to launch the browser. 

```js
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';

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;
};
```
Now we need to import the playwright package, start the browser by passing all the values we get from options, and then open a new page and set the viewport size. Now navigate to the respective page url, wait for all the contents to get loaded, and take a screenshot. 

```js
const browser = await puppeteer.launch({
  ...options,
});
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.goto(url, { waitUntil: 'networkidle2' });
const buffer = await page.screenshot({ type: 'png' });
await browser.close();
```

We need to store the screenshot in our local folder to do that import file system module. Check whether the file path has already existed or not by using the `recursive` option inside the `mkdirSync` function. It'll create a new folder if the file path doesn't exist. Otherwise, use the existing one. After all the checks, use the `writeFileSync` function to save the screenshots.

```js
fs.mkdirSync(ogImageDir, { __recursive__ : true });
fs.writeFileSync(imagePath, buffer);
```

Let's set up our prebuild script

```json
{
    "scripts" : {
        "generate:og": "node ./scripts/generate-og-image"
        "prebuild": "yarn generate:og"
    }
}
```

That's it for today. I hope you like this article. If you have any questions or comments, let me know on Twitter at [@jana__sundar](https://twitter.com/Jana__Sundar) or via email at [mailtojana23[at]gmail.com](mailto:mailtojana23@gmail.com). But until next time, happy coding!




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 explain how I built this blog, what technologies I used and why, what I learned while doing so, and references to other sites which inspired me to create this blog.

## Stack 

[Next.js](https://nextjs.org/) is a react framework that offers [SSG](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)(static site generation) and [SSR](https://nextjs.org/docs/basic-features/pages#server-side-rendering)(server-side rendering). 

I use SSG with [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)(ISR) for blog posts. This feature allows us to create or update static pages after the build process, which helps us avoid redeployment.

I also use Next.js API routes to store data like subscribers and page view count. I use FaunaDB to persist the page view of all the posts.

### Tailwind CSS

I use [tailwind](https://tailwindcss.com/) css to style all components from scratch. It is a utility framework for css with prebuild classes, and it has many handy features, one of which is purging unused css.

Follow this doc to install tailwind with Next.js.

- [https://tailwindcss.com/docs/guides/nextjs](https://tailwindcss.com/docs/guides/nextjs)

Use this vscode plugin for tailwind, which improves your coding experience.

- [https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

The typography plugin from tailwind provides a set of `prose` classes. By adding a single style, we can create beautiful typography without hassle.

### MDX

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

The popular libraries to use MDX with Next.js

- [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
- [@next/mdx](https://www.npmjs.com/package/@next/mdx)
- [next-mdx-enhanced](https://www.npmjs.com/package/next-mdx-enhanced)
- [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote)

I use `mdx-bundler` to compile and render the mdx file. 

To compile the mdx code, import the `bundleMDX` function from mdx-bundler. As a result, we'll get the code and frontmatter of the MDX file. It has built-in support to add the remark and rehype plugins.

```ts line=1,4,6,7 showLineNumbers=true
import { __bundleMDX__ } from 'mdx-bundler'

bundleMDX({
  source: /* mdx code */,
  mdxOptions(options, frontmatter) {
    options.remarkPlugins = [...(options.remarkPlugins ?? []), /* myRemarkPlugin */ ]
    options.rehypePlugins = [...(options.rehypePlugins ?? []), /* myRehypePlugin */]
    return options
  },
})
```

To render mdx code in the browser, pass the compiled mdx code to `getMDXComponent` imported from the mdx-bundler client.

```tsx line=1,4,8
import { __getMDXComponent__ } from 'mdx-bundler/client'

function MDXPage({code}) {
  const Component = React.useMemo(() => getMDXComponent(result.code), [result.code])

  return (
    <main>
      <Component />
    </main>
  )
}
```

<Callout>
Follow this article from [Pedro](https://ped.ro/writing/code-blocks-but-better) to create custom rehype and remark plugins.
</Callout>

### Code snippets

This blog has two ways to render syntax highlighted code snippets. The first option is a static snippet with options like highlighting words and lines and showing line numbers. 

```js line=6 showLineNumbers=true
import React from '__react__';

export default function MyApp() {
	return (
		<div>
			<h1>Welcome to my app</h1>
		</div>
	);
}
```

The other option is a live editable playground allowing users to interact and experiment with code. I used Sandpack to achieve this feature.

<Sandpack files = {{
'/App.js' : `import React from 'react';

export default function Counter({ initialCount = 0 }) {
  const [count, setCount] = React.useState(initialCount);
  return (
  <div className="flex gap-2 items-center">
    <button type="button" onClick={() => setCount((prevCount) => prevCount - 1)} className="px-4 py-2 bg-gray-800 text-white rounded-md shadow">
      -
    </button>
    {count}
    <button type="button" onClick={() => setCount((prevCount) => prevCount + 1)} className="px-4 py-2 bg-gray-800 text-white rounded-md shadow">
      +
    </button>
  </div>
  );
}
`
}}  />

### Graph CMS

Graph CMS is the headless CMS based on GraphQL Content API and delivers your content across platforms. The post data for this blog come from Graph CMS.

#### Getting Started With Graph CMS

We will create a new project and assign it the name and description. Then set the region near to you, and 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 will 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. We'll add new content for our model by clicking a create item button.
   <Image src="https://media.graphcms.com/TcPtRITMWt0dIRnXlAAZ" alt="Add Content to Schema" />
 
Add assets to our model, and use the asset model. It is the default system model in the CMS and supports all file formats. 

   <Image src="https://media.graphcms.com/ubCs0unTz65sxTafwPg2" alt="Add assets to assets schema" />
    
To access data from the API call, go to the endpoints section, which is inside settings, and then add data access permissions.
    <Image src="https://media.graphcms.com/NrbxDuSDQUKFdJaVT1g4" alt="API Access Endpoint" />

To fetch the data, copy the API URL to access content from the graphql call.
    <Image src="https://media.graphcms.com/h972OM1bSwOCFrdWpzZi" alt="API Access Endpoint URL" />
    
### Helper Functions

My project has a script folder that contains a few scripts to perform specific operations. These scripts run before creating a production build.
I wrote a custom function to create an RSS feed. I used `next-sitemap` package to create sitemaps.

```json
{
    "generate:rss": "node ./scripts/generate-rss",
    "prebuild": "yarn generate:rss"
}
```
---

Here are some of the websites that inspired me to create my blog

<Callout type="info" title="Inspiration">
- [Amelia Watternberger](https://wattenberger.com/)
- [Kent C Dodds](https://kentcdodds.com/)
- [Josh Comeau](https://www.joshwcomeau.com/)
- [Maxime Heckel](https://maximeheckel.com/)
- [Brian Lovin](https://brianlovin.com/)
- [Chris Nicholas](https://www.ctnicholas.dev/)
- [Lee Robinson](https://leerob.io/)
- [Twan Mulder](https://www.twanmulder.com/)

</Callout>

That's it. I hope you got the push to create your blog. If you have any questions or comments, let me know on Twitter at [@jana__sundar](https://twitter.com/Jana__Sundar) or via email at [mailtojana23[at]gmail.com](mailto:mailtojana23@gmail.com). But until next time, happy coding!


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.

Blog

2021