Migrating to Next 13?
I recently migrated my site from Next.js 12 to Next.js 13 and upgraded react to version 18. In this article, I'm going to cover the challenges I faced as well as how I overcame one particularly sticky issue that took me longer than I expected related to the CSS styles I leveraged.
Architecture
My application architecture is leveraging React 18 with the NextJs framework, Contentful for blog content, Tailwindcss to achieve consistent styling and hosting by Netlify. The primary reason for this is that at this time, this system is primarily for me to develop my skills and learn more about these platforms. All of these come with starter accounts and free hosting. The only cost to me is the domain registration costs at this time.
Getting Started
I had an existing site already running with an older version of NextJs, but if you don't and you're looking to get started here's some help. If you want the javascript version, get started with the command referenced below.
npx create-next-app@latest --experimental-app
This will prompt you if you want to start for several items such as if you want typescript, eslint, and the root directory for import statements. Follow the prompts as you desirtoto get started with NextJs. Once the initial install is done get started with Tailwindcss by running the next commands and following the rest of their great get started page. This page is great and has many framework-specific guides if you don't want to use Next.js
npm install -D tailwindcss
npx tailwindcss init
You can visit this repository to see the complete setup referenced and used today. Tailwind has great documentation for building out styles using consistent classes and a great reusable language across all of their utility directives. The downside is that the class structure ends up getting very verbose the more complex you make your styles and more responsive classes that you add. The post CSS system though does help to strip out any unnecessary classes during the build processes which makes the payload incredibly small.
Publishing with GitHub webhooks, Contentful and Netlify
I publish my site anytime code is pushed to the develop or main branch through GitHub webhooks. The develop branch provides an automatic preview akin to a blue-green deployment used in enterprise environments. This allows me to view the site and test new functionality before I decide if I want to merge to the production branch. In the image below, you can see the webhook URL for Netlify and then you below but now shown, you can configure the actions you want to send the webhook for.
Within Netlify, I can configure the deployment settings so that I view the website before it gets deployed. In the image below, I've configured the application to build on any push and to leverage the main branch as the production environment.
An issue with CSS on the root directory
In trying to complete this upgrade, I had a significant issue that took too long to realize what the problem was. In my local development, I was able to visualize the CSS styles that I wanted and they were applied to the page correctly. I could run the npm build and production package of the code locally and still see the styles. Upon pushing the code to GitHub, I ran into an issue every time the code was pushed to Netlify. The issue was that the root page under the app directory didn't show the styles. I viewed the code and all of the classes were attached to each element on the page. I figured the stylesheet must be corrupt, but I didn't know where the issue was coming from.
I fought with the App directory structure and made changes here, thinking sure it was an issue with my build step or the way I was importing the resources. I updated the post css plugins to the following:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
... (process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}
This change didn't resolve my issue directly so I went back to the drawing board. I read and read blog after blog and all of the Tailwindcss and Nextjs documentation around setting up the application with the new libraries. Based on what I read, there were really no changes needed for this upgrade. Still, I was stumped.
Resolution
Many of these edge platforms have an opinionated view on what should be done to make the code fast, performant, and small for the consuming application or browser. Cloudflare, Netlify, and Vercel all attempt to automatically compress static resources such as CSS and Js imports for your code. The problem is that they don't always do this correctly. Netlify keeps these settings in their post-processing menu.
Within this section, there are settings for asset optimization. Before I resolved this issue, the system was trying to optimize all the assets as shown below. As you can see in the image, all of the items are compressed, minified, and attempt to optimize for content delivery. The issue for me was resolved when I told Netlify to disable all asset optimization. Since, I'm using PostCss processing which removes all unused CSS during the build, I felt comfortable removing this. I'm also using NextJs Image optimization and the WEBP format for all of the images from Contentful which allows great compression already. With all of these disabled, I can now see the styles on the root page as well as all of the content.
