CSS and Images Not Loading on Next.js App
21 replies
Last updated: Jan 14, 2023
E
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?
K
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?
K
Is this a next.js issue or Sanity?
E
i have the way to show up, but the styling still not loading and browser console is not giving error.
K
What page is it happening on? Just one or all?
E
i built the next.js app and now implementing it on sanity
E
local host 3000 and the sanity studio is on local host3333
K
So both are not working?
E
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
K
Did you follow these steps?
https://tailwindcss.com/docs/guides/nextjs
https://tailwindcss.com/docs/guides/nextjs
E
yes. it was perfecting working earlier and i took a break and re-opened my computer now styling is not loading
K
Okay do you have a global.css file? Can you post it here?
E
@import 'tailwindcss/base';@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
.contactInput {
}
@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 }}
E
@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
}
}K
It should look like this.
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
K
Please check the documentation and do it that way as that is how Next js recommends. If there are still problems let me know.
E
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.
E
and it was working earlier even without removing the @layers part on global css file
K
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?
K
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.
E
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.
K
Okay good. Glad I could help
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.