In the last few days, I worked to move this website to Next.js. In 2020, I moved from WordPress to Hugo and would be better served with Next.js. It was a straightforward migration, and I share what was done in this post.
Fast forward to 2022, I am writing less than I wish, and I want to return to it in 2023. In 2020 I decided to write long, detailed posts (also published in freeCodeCamp), which may not work well. I can share small tips here and there, and this format doesn't fit my website well as it is. I could share these things on the bird website; however, I don't want like the new manager. I might keep sharing them there; however, I want to own my content.
I recently came across Contentlayer. Contentlayer is an SDK that validates and transforms your content into type-safe JSON. This is the best of worlds: I can keep my content in markdown and use TypeScript on my website. I don't need to use GraphQL or different solutions to get what I need.
Delba Oliveira has a great post series called "Build a Developer Blog with Next.js". Her posts and website source code helped me understand what needed to be done here. There is also another tutorial called "Building Better Next.js Static Sites with MDX and Contentlayer" that helped me a lot.
If you come from the WordPress world, you are familiar with Posts and Pages. With Contentlayer, I recreated these entities with the attributes that I needed (permalink, slug, excerpt, etc.), while keeping the same URLs that I used in WordPress and Hugo. I also kept the tags pages in place.
Here is the PR of the migration, in case you like big PRs. I organized the commits into different types:
- Add Next.js (aka initial commit)
- Rename static → public (Hugo stores static content in a
staticfolder and Next.js in a
- Remove files related to hosting and Hugo theme (old Hugo and Netlify files)
- Adjust content to Next.js (update some metadata, fix HTML/Markdown syntax)
- Port website from Hugo to Next.js (here is where the sausage is made)
Some work is left, like fixing the RSS feed and things I'd like to add, such as search and design changes. I'll be doing this here and there, and my primary intention was to move stacks to unlock the future versions of this website.
What is next?
I want to explore other format content formats, something as Tumblr: video, image, quotes, and links. I'll adjust the design/code of this website to keep the almost 250 posts I have published since 2005 while adding a new session for this microblogging content.