Tutorial: Next.js static MDX blog
I tried to make this tutorial as beginner-friendly as possible. If, however you have a question feel free to ask on the discussion page and if you find a bug please report it using the issues
In this tutorial, we will:
- create a fully static site using the Next.js v14.x (compatible with v13.x) app directory
- create several components using React v18.x
- add support for MDX content formatting via the @next/mdx package
- add a plugin to generate a table of contents for each post automatically
- add another plugin that will handle code block styling based on your favorite VSCode theme
- add yet another plugin that will render GitHub like alerts, created using the github markdown syntax for alerts
- add linting tools for both the code and the content (markdown lint)
- add a CI/CD pipeline using Vercel.com so that every time we commit code to our GitHub repository, it gets automatically deployed (staging/production)
- add bugs monitoring and Content Security Policy (CSP) violations logging using Sentry.io
- install useful extensions for VSCode and learn how to use them
Note
I made this tutorial with total beginners in mind. However, if you are already an experienced Next.js dev, then there are some chapters you may want to skip
Table of Contents
- 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 setup
Note
Today is the 13th of august 2024 and I have released the first page of this tutorial, the next pages listed here are almost done, I just need to finish setting the metadata, doing some spell checking, verify that the code examples work as intended, ... I will release the next pages over the course of the next one to two weeks, every time a page is done I will release it
- 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 using next/image
- MDX plugins
- Code highlighting plugin
- Headings ID plugin
- Table of Contents plugin
- GitHub flawored markdown plugin
- GitHub like alerts plugin
- Metadata (tsx and mdx pages)
- Frontmatter plugin