Chris.luChris.lu header image, displaying an 80s style landscape and sunset

Introduction

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

I have always wanted to create my own developer profile and not be limited by what I can do on social networks. My main goal was to create a blog (website) that is blazingly fast and has good DX so that I can add content quickly and don't have to spend countless hours doing maintenance. I documented every step while building my dream project and I'm happy to finally be able to share it with the community by publishing this tutorial

After I my first deployment in production went live I immediatly launched a lighthouse analysis and I'm glad the results matched my expectations:

lighthouse analysis results showing a 100% score for performance, accessibility, best practices, SEO

Preview

In this tutorial, we will:

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

Source code

All the source code for this tutorial can be found in the next-js-static-mdx-blog_tutorial_chris.lu repository on GitHub, every chapter of this tutorial is a seperate branch in the repository. To view the full code, have a look at the last branch "32_sitemap"