Relative Content

Tag Archive for next.jstailwind-csschakra-uiapp-routerhydration

Next js 14 App Router & Chakra UI, the root page (/) style broke after navigating to other route/refresh

I am using Next.js 14 app router with Chakra UI and Tailwind. I am experiencing an issue locally where when I first visit the outermost page, which is /, the styles are working fine. Then, I navigate to the /galleries page, and the styles on that page are also working fine. However, when I navigate back to the outermost page /, the styles suddenly break. Additionally, all pages in the outermost folder, such as /, 404 not found page, forbidden page, etc., also have broken styles. Then, when I go back to the /galleries page, the styles are still functioning without any issues. This only happens for the outermost pages. Why is this happening? I also tried deploying to Vercel, and my website works fine without any of these issues. This only happens on my local environment. Please check on my code source here my github repository, sorry if the code is messed up because I tried various ways to solve this problem. Thankyou