Skip to Content
KW

Kyle Wong

Head Of Marketing at Traworld

I build brands, strategies and experiences in the digital world.

Back

This blog is now officially on NextJS 13

So, Vercel announced Next.JS 13 on 26/10/2022 and there's a lot of exciting new features were announced. To me, the biggest changes during the upgrade that I did for this blog is the experimental app dir.

The new beta docs for the upgrade guide to Next.JS 13 come in handy. TLDR, here's what i did for my blog migration.

  • Upgrade all my Next.JS packages to the latest
  • Using codemods provided by Next.JS for my <Image/> and <Link/> components
  • Migrate my _app.tsx and _document.tsx to /app/layout.tsx
  • Rewrite data fetching logic from GetStaticProps to just functions to be called with async components.
  • Migrate all of my pages to the new app directory
  • Migrate all the components to sit right beside my pages
  • Commit and deploy

Fortunately, my blog is way too simple and can be run fully on the server without any client interaction and the migration process was quite smooth. In terms of the speed of the website, it's still blazingly fast! Here's the GTMetrix Result and a quick preview down below.

Latest GTMetrix Result Preview

This is not a tutorial post, rather it is just an update for the tech stacks on this blog site. I think the new layout RFC makes a lot of sense, while it's not perfect, enabling me to do a fetch directly within my components turns me on. Nice stuffs!

Here's my git repository for this blog.