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.
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.
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.
The markdown files are under version control to ensure proper quality processes as we do it already with our code.
The technical solution is split up into two components:
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.
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.