www.cibulka.codes

Next.js 13 is a significant update, introducing the "app directory" with React server components. It packs very powerful features focused on performance and security, but was also relatively unstable for some time with a slight learning curve.

The update allows me to handle a lot of things server-side (image generation, fetching and prefetching data, localization), making things faster and more secure. Like in good old PHP days. 🐘

Certain aspects of the sollution still leaves me somewhat frustrated (the lack of in-built internalization sollution, for instance), but ultimately I'm happy for the switch.

A point of frustration with Next.js 13. The previous versions had an in-built solution for providing multiple language versions of your site - it worked out of the box and very well.

Next.js 13, however, listed i18n as a "not planned feature". This prompted the community to find its own sollutions, leading to further instability and breaking updates.

After some months the team finally shared a guide on how you can implement i18n on your own. Unfortunately I still find it quite incomplete.

Here's the list of things I miss from the guide:

cibulka.codes > www.cibulka.codes > www.cibulka.codes/en

I love Markdown and I am obssesed with MDX! Here's my reasoning:

1. Even the raw format of your content is easily readable for both humans and machines.
2. Each piece of the content can be literally a file in a folder. You can query them through filesystem, which is usually quite simple and always very fast.
3. MDX combines interactive JSX components with standard Markdown. This allows you to create a sort of an API for a content manager - giving them enough flexibility to use the tools you've prepared for them while limiting the complexity.
4. Due to the simplicity of the format, it is incredibly easy to convert it to anything else you need.
5. Let's cut out the middleman! There is no need for CMS with this sollution.

A brilliant library Contentlayer turns the MDX files to JSON files during the build step (and creates their TypeScript definitions right away). This works especially well with Next.js 13 and server components, which allows you to leave most of the bulk on the server (and send to the client only the actual content).

Creating and maintaining one's CV can be a bit of pain. Duplication is one of the issues: Is your PDF portfolio in sync with your web CV? In all the language versions?

For this reason I've created an automated page generating my CV in print-friendly format. The content comes from MDX files, that are shared between the website, public API and the CV.

The PDF version of the CV is automated by a Puppetteer-powered script. For now I run it manually through NPM script - and whenever I finally learn the GIT actions, this will probably be automated as well. 💪

One of the features of Next.js 13 is an ability to "intercept routes" - the same URL can act differently on direct load or if requested from an app.

This is especially useful for modals: You want to see a content from URL in the temporary dialogue (without resetting the state of the UI under it), but you want to allow the usage of back/forward buttons. Having separate URLs for the important pieces of content is obviously good for SEO as well.

It was a bit tricky to implement for me: Most of the guides expect the existence of the root layout (which is incompatible with the guidelines for i18n, as written above). I also found the syntax a bit confusing. Ultimately I made it work nonetheless. :)

Nothing special here, just wanted to have a bit more control on how the video is handled (and frankly it was just fun). There are however still some things to polish (allowing the user to change the time, for instance).

My portfolio also contains my shot at Tetris game. Give it a try, even if it's a bit addictive! 🍭 Or check the repo of the project.