Next 12 to Next 14 - Migration Experience

Tags
cover
Published
Author
Today I will be writing about my experience migrating a Next.js 12 code-base to Next.js 14, I wrote the original code back in 2021 and continue to maintained it until early 2024. I would have continue using Next 12 if not for the issue of Vercel sending me notifications

Reasons to Migrate to Next 14

Next 12 uses an old version of Node, and of React that Vercel will stop supporting Next 12 by the end of the year and, or a version of node that I used on my project.
Another reason to migrate to Next 14 re-learn the structures, format, and paradigms that introduced with Next 13 and continue on Next 14. I waited a new release to finish the migration or start it rather.

How was my experience

Early in 2024 I set out to update Something To Do, I took some time to learn the new features of the framework, and looked through different Next 13, and 14 repos to understand the new structure and how server-components are used. After I understood the basics I proceeded to just update everything on the Something To Do repo and see what breaks… to my surprise everything did break, I was using some tools that while were nice to have on Next 12 on Next 14 were unnecessary, such as, next-pwa, next-seo, server side rendering (Not to be confused with React server components), some other tools that I stopped using just because I was not taking full advantage of were Styled Components, PostCSS, and Husky.
After learning that everything broke, and that I had over-engineered my Web-App. I proceeded to slowly update all my dependencies this when I learned that I had to remove and rethink my code away from next-pwa, next-seo, and server side rendering of next 12. So I choose a somewhat of a lazy route: created a new project with next 14.
Going this route allowed me to more easily understand all my breaking code and how I needed to rethink it, also it allow me to rethink my folder structure from the ground up without any confusing migration patterns.