Tutorial: Next.js 15 static first MDX starterkit

Table of Contents

• Introduction (& full project source code)
• Prerequisites (setting up a development environment)
• Project setup (Next.js 15 & React 19) using CNA
• Next.js 15 Typescript plugin and typed routes
• Next.js 15 configuration (next.config.ts)
• First Typescript page
• package.json scripts
• CI/CD pipeline setup (Vercel)
• Error handling and logging (Sentry.io)
• Content Security Policy (CSP) header
• Next.js 15 MDX support
• First MDX page and static rendering
• React in MDX and MDX in react
• Linting setup using ESLint 9 flat config
• Typescript linting and custom flat config
• Linting MDX (markdown) using remark-lint
• Linting in VSCode using ESLint and MDX extensions
• Styling and CSS Modules
• Navigation and next/link
• Navigation styling and next/font
• The mdx-components file
• Optimizing anchors using next/link
• Optimizing images (in MDX content) using next/image
• MDX (remark / rehype) plugins introduction
• Code highlighting plugin
• Headings IDs 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 (Vercel)
• Production release (& custom domain)
• Dynamic Sitemap.xml (generated at build time)