Re-launching our Engineering Blog

Our Engineering Blog was re-launched on the 28 of July. Following a simplistic approach to reduce the overhead required to run this blog and providing the optimal speed.

Technology

Our website is running on Next.js. Like almost all major tech companies we decided to integrate our blog into our main domain rather than a subdomain.

Natural

The main aspect of our blog is a great writing experience for the authors. Markdown just feels right because it's focused on the content and not on design.

With those two factors in mind, Next.js and Markdown our path was clear, we had to find a solution to render Markdown files inside of our Next.js application.

Quality

The markdown files are under version control to ensure proper quality processes as we do it already with our code.

Solution

The technical solution is split up into two components:

1. The blog page which renders an overview of all blog posts.
2. The blog detail page

Both components have to be able to fetch the content of the markdown files, this indicates common logic between both components, a great place to start.

Worth to mention our website is static generated rather than server-side rendered to optimize speed. That has an impact how we get our markdown files. Next.js provides unique functions to solve this, by using getStaticProps to fetch data at build time.

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

With that function, we can read all markdown files during build time and pass them as props to our blog component. That's all we need to render a blog post overview.

The blog post detail page is still missing, we will fill that gap in a second. You might ask yourself how we can do that for dynamic routes. We need a solution to pre-render based on paths like the following /blog/at-io-annotator-we-strive-to-bring-people-together. Well sure you guessed already, there is a function as well getStaticPaths to pre-render based on data.

With those two functions, we can implement a static generated blog written in Next.js using Markdown files.

Let us know if you want to have all the nitty-gritty details.