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 flawored 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, robots.txt and manifest