Next.js is a cutting edge React framework that just had a major new release with version 13 at the end of 2022. I wanted to challenge myself, so I am using the experimental app directory, rather than the legacy pages folder. The best part is you are looking at the results of this experiment right now!

The biggest stable updates to Next 13 are to the <Image/> and <Link/> components, as well as ES Module Support for next.config.mjs, but there are some "experimental" updates as well. I

My general portfolio site was made with next.js 12, but when I updated it to add this blog section, I wanted to use the new version 13. Before I could get started I used the Next.js Migration Guide and everything went pretty smoothly. The <Link/> and <Image/> updates we simple to adapt to, but I did challenge myself by switching over to the experimental App Directory. Besides the name of the folder, most of the changes were in the way you apply common styling to layout.tsx instead of _app.tsx and _document.tsx as well as creating your own <Head/> component.

As with any migration, you have to spend some time deep diving on your dependencies to make sure everything is playing nicely, but in the end I was happy with how it all came together. If you are interested in looking into the code, my GitHub repo for this project is here.