A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter.
- building the home page, creating a general layout and a reusable grid to display the latest posts.
- reading markdown files and rendering posts as JSX with gray-matter and react-markdown.
- displaying dynamic post pages and generating paths.
- optimizing images from markdown with Image.
- rendering code snippets from markdown and optimizing React Syntax Highlighter bundle size.
- handling messages sent by users via an API route.
- storing messages in a database with MongoDB.
- adding metadata in Head and customizing _document.js file.
- using React portals to show user-friendly notifications.
- deploying on Vercel.
Based on Next.js & React - The Complete Guide by Maximilian Schwarzmüller (2021).