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 v19.x (compatible with 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 template
- add yet another plugin that will allow us to GitHub like alerts to our content
- add linting tools for both the code of the project 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
Note
Today is the 13th of august 2024 and I have release the first page of the 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 works 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
- 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
- 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