Web Dev Roadmap for Beginners (Free!): [ Ссылка ]
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.
💖 Support me on Patreon ➜ [ Ссылка ]
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: [ Ссылка ]
- Advanced React: [ Ссылка ]
- Junior to Senior Dev Roadmap: [ Ссылка ]
🚩 Subscribe ➜ [ Ссылка ]
📬 Course Updates ➜ [ Ссылка ]
❓ Questions - Please post them to my Discord ➜ [ Ссылка ]
☕ Buy Me A Coffee ➜ [ Ссылка ]
👇 Follow Me On Social Media:
Github: [ Ссылка ]
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
🔗 Source Code: [ Ссылка ]
🔗 Playlist for this Next.js Course: [ Ссылка ]
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: [ Ссылка ]
🔗 Next.js 13 Docs: [ Ссылка ]
🔗 ES7 React Snippets Extension: [ Ссылка ]
🔗 What is MDX?: [ Ссылка ]
🔗 next-mdx-remote RSC Docs: [ Ссылка ]
⚙ Project Dependencies:
🔗 react-icons: [ Ссылка ]
🔗 next-mdx-remote: [ Ссылка ]
🔗 highlight.js: [ Ссылка ]
🔗 rehype-highlight: [ Ссылка ]
🔗 rehype-slug: [ Ссылка ]
🔗 rehype-autolink-headings: [ Ссылка ]
🔗 sharp: [ Ссылка ]
🔗 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
