Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Build and Deploy a Next.js blog with Remote MDX Content Files and Nextjs 13. This is the final project in the Next.js 13 for Beginners tutorial series. You will learn how to fetch remote MDX content, process it, apply incremental static regeneration with revalidation, and more.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

Course Updates https://courses.davegray.codes/

Questions - Please post them to my Discord https://discord.gg/neKghyefqh

Buy Me A Coffee https://www.buymeacoffee.com/davegray

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

Source Code: https://github.com/gitdagray/next-js-course

Playlist for this Next.js Course: https://bit.ly/dg-nextjs

Build and Deploy a Next.js Blog with Remote MDX Files and Nextjs 13

(00:00:00) Intro
(00:00:05) Welcome
(00:00:27) Starter Code and Project Notes
(00:01:43) npm install next@latest
(00:02:14) What is MDX?
(00:02:44) Remote MDX Content Repository
(00:05:23) GitHub API Token
(00:07:33) root page.tsx
(00:08:57) Setting an eslint rule
(00:09:59) root layout.tsx
(00:11:22) components / Navbar.tsx
(00:11:52) Clean-up
(00:12:50) lib / posts.ts / getPostsMeta
(00:18:26) lib / posts.ts / getPostByName
(00:21:13) next-mdx-remote & compileMDX
(00:26:17) components / Posts.tsx
(00:27:44) components / ListItem.tsx
(00:28:04) Dynamic Post Pages
(00:36:35) Check progress with npm run dev
(00:38:15) Adding Highlight.js & Rehype Plugins
(00:44:38) Dynamic Tag Pages
(00:50:48) taillwindcss aspect-ratio
(00:51:52) Video component
(00:54:42) Custom Image component
(01:01:12) next-sitemap
(01:03:53) Checking Revalidation for ISR
(01:07:55) On-Demand Revalidation with revalidatePath
(01:17:14) Deploy to Vercel
(01:24:51) Checking Deployed On-Demand Revalidation
(01:26:29) Project & Series Wrap-up

Tutorial References:
Next.js Official Site: https://nextjs.org/
Next.js 13 Docs: https://nextjs.org/docs
ES7 React Snippets Extension: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
What is MDX?: https://mdxjs.com/docs/what-is-mdx/
next-mdx-remote RSC Docs: https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support

Project Dependencies:
react-icons: https://www.npmjs.com/package/react-icons
next-mdx-remote: https://www.npmjs.com/package/next-mdx-remote
highlight.js: https://www.npmjs.com/package/highlight.js
rehype-highlight: https://www.npmjs.com/package/rehype-highlight
rehype-slug: https://www.npmjs.com/package/rehype-slug
rehype-autolink-headings: https://www.npmjs.com/package/rehype-autolink-headings
sharp: https://www.npmjs.com/package/sharp
next-sitemap: https://www.npmjs.com/package/next-sitemap

Was this Next.js 13 tutorial about building and deploying a Nextjs blog with Remote MDX files helpful? If so, please share. Let me know your thoughts in the comments.

#nextjs #remote #mdx