Tutorial: Next.js static MDX blog

Table of Contents

• Introduction
• Prerequisites
• Project setup and first commit
• Typescript plugin and typed routes
• Next.js configuration
• First Typescript page
• package.json scripts
• CI/CD pipeline setup
• Error handling and logging
• Content Security Policy (CSP)
• Next.js MDX support
• First MDX page and understanding static rendering
• React in MDX and MDX in react
• Linting setup using ESLint
• Linting MDX using remark-lint
• Linting in VSCode using ESLint and MDX extensions
• Styling and CSS
• Navigation and next/link
• Navigation styling and next/font
• The mdx-components file
• Optimizing using next/link
• Optimizing images in MDX using next/image
• MDX plugins
• Code highlighting plugin
• Headings ID plugin
• Table of Contents plugin and React Observer Hook
• GitHub flavored markdown plugin
• GitHub like alerts plugin
• Metadata (tsx and mdx pages)
• Open Graph Image(s)
• Frontmatter plugin
• Analytics and Speed Insights
• Production release (custom domain)
• Static and dynamic Sitemap