Build and Deploy a Next.js Blog with Remote MDX Content Files and Nextjs 13
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.
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
🔗 Source Code: https://github.com/gitdagray/next-js-course
📚 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
#nextjs
