Next.js + MDX Crash Course

Published: 07 May 2021
on channel: Benjamin Carlson
11,539
346

MDX and Next.js is a great combination. It allows for faster page speeds and easier content development. In this video, I show you how to connect Next.js and MDX pages. I show you how to add custom styles as well. One great application for mdx is using to to create a blog! I definitely recommend using mdx pages for a developer personal website that has static content.

We use the following dependencies to help us:

@mdx-js/loader
@mdx-js/react
@next/mdx

Helpful links:
Next.js docs: https://nextjs.org/docs/getting-started

0:00 Introduction
0:22 Starter Files
0:30 Adding dependencies
0:53 next.config.js
1:16 Adding our about.mdx file
2:08 Custom Components
3:31 Custom MDX styles
5:05 Adding wrapper to _app.js
6:08 styling InlineCode
7:04 Conclusion

My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3i7X3gx
💻 Laptop - Apple MacBook Pro (2018 - 15 inch) - https://amzn.to/3o7y2l5
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3p6zbur

My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/2Ok9f1e
🔭 Awesome Camera Lens - Sigma
🎤 Microphone - https://amzn.to/3ia5XdA
💡 Lights - Neewer LED Lights - https://amzn.to/3oUsMSj

My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/

View All My Gear - https://benjamincarlson.io/gear

Support Me:
👨🏼‍💼 Join this channel to get access to perks -    / @benjamincarlson  
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42

Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.

Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter -   / bjmncrlsn  
Github: https://github.com/bjcarlson42
💼 LinkedIn -   / bjcarlson42  
✍️ Medium -   / benjamincarlson  
📓 Newsletter - https://buttondown.email/benjamincarlson

If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!

#nextjs #mdx


On this page of the site you can watch the video online Next.js + MDX Crash Course with a duration of hours minute second in good quality, which was uploaded by the user Benjamin Carlson 07 May 2021, share the link with friends and acquaintances, this video has already been watched 11,539 times on youtube and it was liked by 346 viewers. Enjoy your viewing!