CSS and Images Not Loading on Next.js App
21 repliesLast updated: Jan 14, 2023
the css and some of images is not loading anymore on my next,js app. one the Chrome console, it's giving me this error "Failed to load resource: the server responded with a status of 403 ()" how can i fix this?
It is difficult to answer without more information but I'll try. When you say your not getting some images does that mean some images are being received?
Is this a next.js issue or Sanity?
i have the way to show up, but the styling still not loading and browser console is not giving error.
What page is it happening on? Just one or all?
i built the next.js app and now implementing it on sanity
local host 3000 and the sanity studio is on local host3333
So both are not working?
im still building the schema for sanity but the next.js is done it's just the css is that one that's not loading. i used tailwind css
Did you follow these steps?
https://tailwindcss.com/docs/guides/nextjs
https://tailwindcss.com/docs/guides/nextjs
yes. it was perfecting working earlier and i took a break and re-opened my computer now styling is not loading
Okay do you have a global.css file? Can you post it here?
@import 'tailwindcss/base';@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
user E px-6 py-2 border border-x-gray-900 rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-x-slate-500 hover:border-gray-800 }
.contactInput {
user E outline-none bg-slate-400/10 rounded-sm border-b px-4 py-4 border-zinc-800 text-gray-300 placeholder-gray-500 transition-all focus:border-gray-300/40 focus:text-yellow-100/60 hover:border-yellow-100/60 }
}
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
user E px-6 py-2 border border-x-gray-900 rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-x-slate-500 hover:border-gray-800 }
.contactInput {
user E outline-none bg-slate-400/10 rounded-sm border-b px-4 py-4 border-zinc-800 text-gray-300 placeholder-gray-500 transition-all focus:border-gray-300/40 focus:text-yellow-100/60 hover:border-yellow-100/60 }
}
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
@apply px-6 py-2 border border-x-gray-900 rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-x-slate-500 hover:border-gray-800
}
.contactInput {
@apply outline-none bg-slate-400/10 rounded-sm border-b px-4 py-4 border-zinc-800 text-gray-300 placeholder-gray-500 transition-all focus:border-gray-300/40 focus:text-yellow-100/60 hover:border-yellow-100/60
}
}It should look like this.
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
Please check the documentation and do it that way as that is how Next js recommends. If there are still problems let me know.
that worked but i needed that layers component section for this circle button so it can help to scroll up to the start of the page.
and it was working earlier even without removing the @layers part on global css file
So when you click the button it should take you back to the top of the page? Is this the functionality you need help with?
The layers component doesn't offer any functionality for going back to the top of the page but if your saying it still doesn't look correct I would add the styles directly to the elements first then when the work you can move it to the layers component.
i think removing the layer components and refreshing it and adding it back somehow worked. idk if the issue will happen again. if it does, i will defiantly try that. Thank you.
Okay good. Glad I could help
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
