A Developer's Odyssey: Upgrading Next.js & Tailwind

It is important to keep our project’s dependencies up to date. Unfortunately, it is not always a high priority. After a point, it becomes a huge technical debt, requiring full time to focus on upgrades rather than doing small changes on the way. That is what happened to us with sufle.io.

Why?

On sufle.io we were using Node 14, Next.js 9, Tailwind CSS 1 and struggling with node-sass and next-mdx-enhanced.

The other reason was, we wanted to use a CMS (Content Management System). As our close followers know we’re actively adding more content to our website like microsites, blog posts, events etc. but we were doing that the “developer” way. After the version updates we planned to integrate a Git-Based CMS to sufle.io and that was one of our motivations to update.

And performance of course! Depending on other improvements we thought that there must be a difference in performance and speed. So it was the time that we must upgrade our website.

How?

It was nearly impossible to update all with yarn install because some packages were fully deprecated or the features of these packages that we used in the code were out of use. So we decided to make a fresh start.

First, created a new Next.js project with Node 20, Tailwind 3 and Next.js 14. Even though we like using Typescript, we didn't use it in this project since we didn’t need it, so we continued with Javascript.

Then configured the Tailwind; custom margins & paddings, colors, fonts and screen sizes for breakpoints. Also migrated some configs with current methods too. We also had sass based CSS files, we migrated them by converting them to CSS with the help of a few postcss plugins like tailwindcss/nesting and postcss-nested.

Both to see progress and because it's easier, we started transferring static pages and necessary codes from the old codebase. By doing this we have checked almost all existing code and made some refactoring and improvements if necessary.

Next challenge was migrating “mdx” files and dynamic routes. Those need to be considered together because our blogs, case studies and events are all dynamic routes and are generated from mdx files. In previous code we used to do it with the next-mdx-enhanced package. However in the new version we didn’t want to use it since it was generating dynamic pages on build time and it was making our development experience worse. So we decided to use next-mdx-remote with @next/mdx. which is a newer and recommended way. By doing this, we write content as markdown in the .mdx file and read it with getStaticProps. Finally, we are at the step of generating all dynamic pages with getStaticPaths in relevant [slug].js.

In general, this was the whole transferring process and it is time to integrate CMS to our code. We did some research and decided to go with Decap CMS (formerly Netlify CMS) that’s because Decap is Git-Based and easy to integrate. As a next step, we have made some configurations for our custom content stylings and added auth mechanism with serverless function to login with BitBucket (Atlassian) accounts.

Finally, we tested our whole pages and functionalities, compared with the existing version and we are live! As soon as we launch, team has noticed the improvement in user experience and speed immediately. Although our lighthouse scores were great, they have improved greatly, too.

New Mind-Opening Panel for Marketers

Now we have a panel that our marketing team can use to add latest mind-opening events, blog posts, case studies and won’t need us as developers. We made our website faster and up to date with the latest standards. This was not a simple endeavor, but a joyful, exciting journey.

Always stay up to date with the cutting-edge technologies!