Next.js + MDX Pages Quickstart

Next.js + MDX Pages Quickstart

4 min read · 788 words · Shared May 10, 2021 by

Article Summary: If you are building a developer personal website using next.js, you can use mdx pages for your blog or other static pages to increase speed and seo.

Chances are, you are a developer looking to build a personal website to show off your projects, experience, writing, and more. If you are using a React based framework, like Next.js, you can use MDX pages instead of JavaScript! By doing this, you can

  • Increase page speed
  • Increase SEO
  • Easier content development (I.E. A blog)

Starter Files

Go ahead and create a new Next.js project or feel free to use an already started project.

Adding dependencies

Inside of package.json we need to add a few dependencies.

package.json
"dependencies": {
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/react": "^1.6.18",
    "@next/mdx": "^9.1.1",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

Make sure to add @mdx-js/loader, @mdx-js/react, and @next/mdx. I left in next, react, and react-dom so you can see what versions I am using.

next.config.js

Next, create a file in your root directory named next.config.js. You may already have this file created. Inside of it we will use the dependencies we just added.

next.config.js
const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
})
module.exports = withMDX({
    pageExtensions: ['js', 'jsx', 'mdx'],
})

Adding MDX pages

Inside of pages directory, add a page named about.mdx. If you navigate to this route you should see a blank screen. This is good, because if we got an error that would mean we did something wrong.

Inside of here we can add anything we want. Any Markdown syntax will work.

about.js
# About

## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.

We can even use components!

about.js
import Button from '../components/Button.js'

# About

<Button />

## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.

And the button component:

button.js
export default function Button() {
    return (
        <button onClick={() => alert('Button was clicked')}>Click me!</button>
    )
}

Adding Styles

At this point you might be saying to yourself, this is great but how do I add styles? We can do that by mapping each markdown tag to an html element and then style that!

Create a file named MDXComponents.js.

Inside of here, add the following:

MDXComponents.js
const CustomCode = (props) => {
    return <code style={{ backgroundColor: 'lightblue' }} {...props} />
}

const MDXComponents = {
    p: (props) => <p style={{ fontSize: '25px' }} {...props} />,
    inlineCode: CustomCode,
}

export default MDXComponents

As you can see, we are mapping some Markdown element to some HTML element and then styling it. You can do this for any html tag.

The last step is to wrap our application with these styles. Inside of _app.js:

_app.js
import '../styles/globals.css'
import MDXComponents from '../components/MDXComponents' // import the styles
import { MDXProvider } from '@mdx-js/react' // import the dependency

function MyApp({ Component, pageProps }) {
  return (
    // Wrap out page props with the MDX Provider!
    <MDXProvider components={MDXComponents}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

export default MyApp

Conclusion

And that's it! You can now rest easy knowing your pages load in record time!

Published May 10, 2021

Related Tags

    #nextjs

Related Posts

Next.js Progressive Web App · January 3, 2022
useState() Hook in Next JS - React Hooks · December 30, 2021
Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Next/Image Doesn't Fill Parent Div! · November 1, 2021
Generate A Dynamic Sitemap In Next.js Website · September 27, 2021

Email Newsletter

On This Page

Starter Files

Adding dependencies

next.config.js

Adding MDX pages

Adding Styles

Conclusion

View Related Posts

January 3, 2022

nextjs-light.png

Next.js Progressive Web App

December 30, 2021

react.png

useState() Hook in Next JS - React Hooks

December 17, 2021

algolia.png

Add Algolia's InstantSearch to Next.js - A Quickstart

November 1, 2021

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

September 27, 2021

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 9, 2021

react.png

useEffect() Hook in Next.JS - React Hooks

July 20, 2021

splitbee.png

Add Splitbee Analytics To Next.js

July 10, 2021

nextjs-light.png

Next.js Crash Course

April 29, 2021

google-analytics.png

Add Google Analytics To Next.js Website

April 15, 2021

firebase.png

Connect Firebase To Next.js


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.