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)
This website uses mdx pages for all the snippets, tutorials, and learn posts!
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.
"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.
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
## 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!
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:
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:
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:
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!
