Play all

Intro

Welcome

Starter Code and Project Notes

npm install next@latest

What is MDX?

Remote MDX Content Repository

GitHub API Token

root page.tsx

Setting an eslint rule

root layout.tsx

components / Navbar.tsx

Clean-up

lib / posts.ts / getPostsMeta

lib / posts.ts / getPostByName

next-mdx-remote & compileMDX

components / Posts.tsx

components / ListItem.tsx

Dynamic Post Pages

Check progress with npm run dev

Adding Highlight.js & Rehype Plugins

Dynamic Tag Pages

taillwindcss aspect-ratio

Video component

Custom Image component

next-sitemap

Checking Revalidation for ISR

On-Demand Revalidation with revalidatePath

Deploy to Vercel

Checking Deployed On-Demand Revalidation

Project & Series Wrap-up

Description:

Learn to build and deploy a Next.js blog using remote MDX content files and Next.js 13 in this comprehensive tutorial. Explore fetching and processing remote MDX content, implementing incremental static regeneration with revalidation, and creating dynamic post and tag pages. Master essential concepts like working with GitHub API tokens, using next-mdx-remote for compilation, and integrating Highlight.js and Rehype plugins for enhanced functionality. Dive into creating custom components, implementing on-demand revalidation, and deploying your project to Vercel. Perfect for developers looking to expand their Next.js skills and create a feature-rich blog with remote content management.

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

Dave Gray

Add to list

#Programming #Programming Languages #Javascript #React #Next.js #Web Development #ESLint #MDX

0:00 / 0:00