In this guide, we'll go through every step to diagnose and fix any issue that can introduce Flash Of Unstyled Content (FOUC) on your Next.js app! This guide was tested on Next.js 14, but it may resolve your issue on other versions. 1. Improper CSS Configuration On Next.js, we can use CSS in many different ways, and it’s easy to improperly misconfigure them while creating your new project, it’s essential to follow the guides provided by the framework to have it properly setup and ready to go. For that, before we go through the rest of the steps, it’s important to check that you configured your app correctly, as that might be the cause of the issue. Here are some resources that can help you double-check your configs: Styling guide by Nextjs: https://nextjs.org/docs/app/building-your-application/styling
Using CSS Modules:       https://nextjs.org/docs/app/building-your-application/styling/css-modules
Using Tailwind:               https://tailwindcss.com/docs/guides/nextjs
Using Sass:                     https://nextjs.org/docs/app/building-your-application/styling/sass
Using CSS-In-JS:            https://nextjs.org/docs/app/building-your-application/styling/css-in-js 2. CSS issues This one might be tedious to debug, but having an error in your CSS can cause your SSR to fail, which leads to FOUC. You can start by going through the terminal, restarting your server, and see if you get any errors about CSS. If all is OK with the terminal, check out your browser console, as it can give you a hint on what’s going on. The issue can be coming even from a missing asset you’re using inside one of your JSX components, so be vigilant. 3. JavaScript Issues Similar to #2, this can cause your SSR to fail and cause FOUC. This step is a bit easier though, as your terminal and the console should report any issue that happens. But to make sure this is the issue, you can check your Network tab, clear it, and refresh the page. If the first request (which should be a GET request with the same URL as your page) responds with 500, then this means that your SSR is failing, and you have to fix whatever JS issue you have on your end Prevention Make sure to always check for any of the issues outlined above when pushing new code to prevent this issue from happening again, and make sure your users are getting the best experience! Conclusion Tackling Flash of Unstyled Content (FOUC) issues in Next.js might seem daunting at first, but with the right approach, it's totally manageable. We've walked through the common culprits—from CSS mishaps to JavaScript bugs—and I hope this guide helps you get to the bottom of any issues you're facing. Remember, keeping an eye on your configurations and regularly checking your code can save you a lot of headaches down the line. Use the resources shared, stay curious, and keep refining your skills. Your users will thank you for a seamless experience, and honestly, there’s nothing more rewarding than that! In this guide, we'll go through every step to diagnose and fix any issue that can introduce Flash Of Unstyled Content (FOUC) on your Next.js app! This guide was tested on Next.js 14, but it may resolve your issue on other versions. This guide was tested on Next.js 14, but it may resolve your issue on other versions. 1. Improper CSS Configuration On Next.js, we can use CSS in many different ways, and it’s easy to improperly misconfigure them while creating your new project, it’s essential to follow the guides provided by the framework to have it properly setup and ready to go. For that, before we go through the rest of the steps, it’s important to check that you configured your app correctly, as that might be the cause of the issue. Here are some resources that can help you double-check your configs: Styling guide by Nextjs: https://nextjs.org/docs/app/building-your-application/styling Using CSS Modules:       https://nextjs.org/docs/app/building-your-application/styling/css-modules Using Tailwind:               https://tailwindcss.com/docs/guides/nextjs Using Sass:                     https://nextjs.org/docs/app/building-your-application/styling/sass Using CSS-In-JS:            https://nextjs.org/docs/app/building-your-application/styling/css-in-js Styling guide by Nextjs: https://nextjs.org/docs/app/building-your-application/styling https://nextjs.org/docs/app/building-your-application/styling Using CSS Modules: https://nextjs.org/docs/app/building-your-application/styling/css-modules https://nextjs.org/docs/app/building-your-application/styling/css-modules Using Tailwind: https://tailwindcss.com/docs/guides/nextjs https://tailwindcss.com/docs/guides/nextjs Using Sass: https://nextjs.org/docs/app/building-your-application/styling/sass https://nextjs.org/docs/app/building-your-application/styling/sass Using CSS-In-JS: https://nextjs.org/docs/app/building-your-application/styling/css-in-js https://nextjs.org/docs/app/building-your-application/styling/css-in-js 2. CSS issues This one might be tedious to debug, but having an error in your CSS can cause your SSR to fail, which leads to FOUC. You can start by going through the terminal, restarting your server, and see if you get any errors about CSS. If all is OK with the terminal, check out your browser console, as it can give you a hint on what’s going on. The issue can be coming even from a missing asset you’re using inside one of your JSX components, so be vigilant. 3. JavaScript Issues Similar to #2, this can cause your SSR to fail and cause FOUC. This step is a bit easier though, as your terminal and the console should report any issue that happens. But to make sure this is the issue, you can check your Network tab, clear it, and refresh the page. If the first request (which should be a GET request with the same URL as your page) responds with 500, then this means that your SSR is failing, and you have to fix whatever JS issue you have on your end Network GET Prevention Make sure to always check for any of the issues outlined above when pushing new code to prevent this issue from happening again, and make sure your users are getting the best experience! Conclusion Tackling Flash of Unstyled Content (FOUC) issues in Next.js might seem daunting at first, but with the right approach, it's totally manageable. We've walked through the common culprits—from CSS mishaps to JavaScript bugs—and I hope this guide helps you get to the bottom of any issues you're facing. Remember, keeping an eye on your configurations and regularly checking your code can save you a lot of headaches down the line. Use the resources shared, stay curious, and keep refining your skills. Your users will thank you for a seamless experience, and honestly, there’s nothing more rewarding than that!

Make

Tailwind

Too Long; Didn't Read

Making security fun one episode at a time

Resolving the FOUC Issue in Next.js App Routes

Too Long; Didn't Read

Companies Mentioned

Aziz Mejri

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Resolving the FOUC Issue in Next.js App Routes

Too Long; Didn't Read

Companies Mentioned

Aziz Mejri

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES