Next.js 13, MDX, Contentlayer, Tailwind stack for building static blog

This article does not provide step-by-step instructions on how to build a blog using the given stack. Instead, it focuses on revealing each component from a technical perspective and discussing their respective pros and cons.

Next.js 13 as a static site generator

Next.js 13 has been recently released, and in my opinion, it may not be fully ready for production use. I have described the issues I met with Next.js 13 at this time in this article. However, this blog publication is built with Next.js and if you are well-versed in React, I believe Next.js would be the optimal choice for utilizing it as a static site generator.

Pros: No needs to learn another templating language - it’s just jsx/tsx. Big comunity. Static-sites oriented toolset.

Cons: Too fresh: still has a lot of unexpected bugs (v13.4.7).

MDX

MDX is a format that combines Markdown and JSX/TSX, enabling the inclusion of React components within Markdown documents. It allows for the creation of dynamic and interactive content, making it popular for building static websites and blogs with frameworks like Next.js or Gatsby.

I have come across the opinion that MDX may be considered overkill, but as a developer, I value the ability to easily add new components to my blog posts when needed. For me, having the flexibility to incorporate additional components seamlessly into my publication is important.

Pros: Easy to integrate custom React components. Again, no need to learn smth new: it’s just jsx/tsx.

Cons: The future is unpredictable, and we can never anticipate how we may need to parse our old content in the years to come. Therefore, it is crucial to have a flexible and adaptable approach to content parsing and management to ensure compatibility and accessibility in the future. I suppose, it will be hard to unmix this cake.

Contentlayer

Contentlayer is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application.

As someone who appreciates TypeScript, discovering Contentlayer has been a valuable find. With Contentlayer, you can have the assurance that when adding new elements to your publication, your existing content and code layouts will remain secure.

Pros: Validates your content & frontmatter. Generates TypeScript types. Great error messages.

Cons: Still beta, can have some unexpected bugs. I faced one bug with @effect-ts/core and Named export ConsoleSpanExporter... versions mismatch and I didn’t manage to fix this. Fortunately my package-lock.json file was in Trash.

Tailwind

I am personally a fan of Tailwind and admire the products they create. If you are still writing CSS manually, I highly recommend giving Tailwind a try. Its approach to utility classes can greatly streamline your styling process. If you’re interested, you can explore my firsthand experience with migrating to Tailwind in this article.

Tailwind typography

Typography should be easy

@tailwindcss/typography plugin offers a range of prose classes that enable you to easily incorporate aesthetically pleasing typographic defaults into HTML content that you may not have direct control over. By utilizing these classes, you can enhance the typography of your content without the need for extensive manual styling.

You just apply several classes and boom - you have responsive nice-looking publication.

<article class="prose lg:prose-xl">
  {{ markdown }}
</article>

Pros: No needs to invent class names. Speeds up development time. Consistent design system across your project.

Cons: Not found 😉. Maybe long class names sometimes, but who cares.

Conclusion

In my opinion, the reviewed stack for building a publication offers an excellent development experience for React developers. However, it is worth noting that certain technologies in the stack may not have fully demonstrated their maturity yet. This could be a factor to consider when choosing components for more critical or complex projects. Nonetheless, the stack works well for personal publications where the focus is on individual use and experimentation.