Next.js Discord

Discord Forum

[lang] folder breaks some of my components

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Please check the video attached for the explanation of the issue (where I reproduce it), I can share some of the code as well and more details if needed.
Answered by Sun bear
Someone else looked into it and he figured that the middleware was excluding files from the public folder. He told me to just create a new folder inside it called static, add it to the exceptions in the middleware file and move those logo files inside it and after doing that it worked, no more 404 errors.

Apparently there was also an issue opened on the repository of the tutorial I've watched with the same issue and the person that helped me pointed that out to me.
https://github.com/HamedBahram/next-i18n/issues/2
View full answer

217 Replies

Sun bearOP
//removed
//removed
//removed
//removed
//removed
//removed
//removed
And if you'd like to see any other source code please let me know, here is my structure.
Gull Dong
so is favicon.ico the logo youre trying to retrieve?
@Gull Dong so is favicon.ico the logo youre trying to retrieve?
Sun bearOP
Oh no. The Logo is inside my components folder
If you watch the video you can see that before moving my login page inside the [lang] folder and updating the middleware file, the logo loads without issues.
But after moving the login page and updating the middleware file it no longer loads. Same with the icons for my input fields.
Gull Dong
are other components loading correctly?
within the file with your form i mean
Sun bearOP
The top navigation bar loads correctly for example
And it's in the same components folder as the logo
Gull Dong
if your RiveLogo.tsx has a default export then idk what the issue could be. i think revay might know more than me
Gull Dong
ive always had funky issues when using nextauth and using more complex components in nextjs that require client side rendering
Sun bearOP
What confuses me is that it loads just fine as long as the login page is directly under the app folder.

But when I put the login page inside that [lang] folder it no longer loads.
I'm not sure if updating the middleware.ts causes the issue or moving the login page or both.
Gull Dong
try disabling middleware for a bit
Sun bearOP
How can I do that ?
Gull Dong
its been a minute but i believe if you comment out code in your middleware.tsx it should be fine assuming the page doesnt break
itll just use nextjs' default auth behavior
@Gull Dong itll just use nextjs' default auth behavior
Sun bearOP
I think you're right. I did that and same issue.
So it's probably not the middleware that is causing the issue.
Gull Dong
prob not
Sun bearOP
Well at least we learned something new, still progress 😄
Gull Dong
wish i had more knowledge ab nextjs lang options but youll figure it out i have faith!
@Gull Dong wish i had more knowledge ab nextjs lang options but youll figure it out i have faith!
Sun bearOP
I think it has to do with that [lang] folder. Maybe it requires some updates to my components or something.
Cause without that folder they load just fine
I mean the logo and the images
The navigation bar works with it for some reason so it looks like only specific components fail.
Gull Dong
yeah it seems that some step in loading images breaks specifically under [lang]
maybe theres a bug or something on the web that alr exists for it
Sun bearOP
@African Slender-snouted Crocodile do you have any clues what causes the issue ?
@Gull Dong maybe theres a bug or something on the web that alr exists for it
Sun bearOP
It's frustrating cause I finally added translation to my app and routing for internatiolization and now this happened where it created another issue.
It's like you solve one thing you break another
Gull Dong
as is working with nextjs tbh
ive had issues where ive spent literal days just trying to implement a feature bc something breaks on the other side, but a strong mental fortitude and the right attitude will keep you on track.
Sun bearOP
And the thing is, for SSR and this sort of path routing most tutorials I checked (basically pretty much all of them) use that [lang] folder.
Gull Dong
(trigger warning)
Original message was deleted
Sun bearOP
Gull Dong
the layout works its just that component that breaks
Sun bearOP
It may be a bit outdated
@Gull Dong the layout works its just that component that breaks
Sun bearOP
Yup seems like it.
Cause the page does load, you're right;
Gull Dong
^ might work
Original message was deleted
Sun bearOP
Oh hold on, I didn't move my layout.tsx inside the [lang] folder yet.
Do I have to do that ?
Gull Dong
no clue you can try it
Original message was deleted
Gull Dong
yeah thats sensible im on my early morning brain atm
yeah thats how i solved my auth pages tbh
Original message was deleted
Gull Dong
copy format from nextjs doc https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
Sun bearOP
Eh now it no longer loads my login page
Gull Dong
can i see ur paths rq
Sun bearOP
nvm it does
Gull Dong
lol
Sun bearOP
I coppied the page.tsx code by mistake instead of the layout.tsx
But it still doesn't load the components
Gull Dong
seems like a nextjs bug
@Gull Dong can i see ur paths rq
Sun bearOP
if you tell me where I can find that I can share sure thing
Gull Dong
nah youre good i panicked when u said home didnt load
Sun bearOP
The console says the file may be corrupt (it worked just fine before using the [lang] directory
Gull Dong
make a copy and move it locally to [lang]
might be an optimization issue
@Gull Dong make a copy and move it locally to [lang]
Sun bearOP
Hmm, same thing.
And I did move it and updated the path, and restarted the server.
Gull Dong
i truly have no clue as to why thats an issue
its a problem with nextjs more than anything imo
Sun bearOP
I'm getting an error in VScode now btw
I didn't even touch that file, this popped up after moving the files as you told me
Gull Dong
it does that when moving many files at the same time id just ignore the error
Sun bearOP
Ok then, what I can observe is that the url is the same
And the login page loads but still the logo won't
Gull Dong
pain
Original message was deleted
Sun bearOP
@Sun bear js //removed
Gull Dong
thinking rive is unable to locate src
Original message was deleted
Sun bearOP
Nope, as you can see.
Hmm but hold on cause it's not the only thing that doesn't load. The images also do the same.
These two are two components basically
Gull Dong
do raw images not load?
@Gull Dong do raw images not load?
Sun bearOP
//removed
So these 2 don't load either.
And what do these 2 components and the logo have in common ? They both render conditionally based on the current theme, using next themes.

Could the [lang] folder break that library somehow ?
Gull Dong
is there an error for the images inside the placeholder?
Sun bearOP
Let me check
@Gull Dong is there an error for the images inside the placeholder?
Sun bearOP
Yes, there is.
Gull Dong
i dont think your public folder is within lang so its most likely using the wrong paths for those icons
as for riv, its probably a similiar pathing error
@Gull Dong i dont think your public folder is within lang so its most likely using the wrong paths for those icons
Sun bearOP
But when I used just the App folder I didn't had the public folder inside the app folder either. The public folder is simply at the root of the project.
@Sun bear But when I used just the App folder I didn't had the public folder inside the app folder either. The public folder is simply at the root of the project.
Gull Dong
the thing is the "root" is probably redefined within [lang] since its '/en/' and not '/'
Original message was deleted
Sun bearOP
They are updated. Same for the logo.
It's using the correct paths I think, I did that thing where you remove the import and then type the name of the component and it auto puts the path for you
Gull Dong
k
Original message was deleted
Sun bearOP
I just did it again just to show what happens.
Original message was deleted
Sun bearOP
Uh, I can try that now.
Like this right ?
// EmailIcon.tsx
'use client'
import { useTheme } from 'next-themes';
import Image from 'next/image';

const EmailIcon = () => {
  const { resolvedTheme } = useTheme();
  const iconPath = resolvedTheme === 'dark' 
    ? "/Icons/LoginFormIcons/DarkMode/Email Login Icon.svg" 
    : "/Icons/LoginFormIcons/LightMode/Email Login Icon.svg";

  return (
    <div className="absolute left-4 top-1/2 transform -translate-y-1/2" style={{ width: '18px', height: '18px' }}>
      <Image
        src={iconPath}
        alt="Email Icon"
        width={18}
        height={18}
        layout="fixed"
      />
    </div>
  );
};

export default EmailIcon;
Original message was deleted
Sun bearOP
Doing what you said works!
// EmailIcon.tsx
'use client'
import { useTheme } from 'next-themes';
import Image from 'next/image';

import darkModeEmailIcon from '/public/Icons/LoginFormIcons/DarkMode/Email Login Icon.svg';
import lightModeEmailIcon from '/public/Icons/LoginFormIcons/LightMode/Email Login Icon.svg';

const EmailIcon = () => {
  const { resolvedTheme } = useTheme();
  const iconSrc = resolvedTheme === 'dark' ? darkModeEmailIcon : lightModeEmailIcon;

  return (
    <div className="absolute left-4 top-1/2 transform -translate-y-1/2" style={{ width: '18px', height: '18px' }}>
      <Image
        src={iconSrc}
        alt="Email Icon"
        width={18}
        height={18}
        layout="fixed"
      />
    </div>
  );
};

export default EmailIcon;
Original message was deleted
Sun bearOP
Thak you very much! But why it didn't work like I had it before ? Like when I didn't had tht [lang] folder it worked. I don't get it, what is it about this folder that makes things not work anymore ?
Okay now both of them work
Only the logo is still unsolved
You said something about the SRC
https://github.com/rive-app/rive-react This is the package that I'm using basically
Similar pathing error
@African Slender-snouted Crocodile
Sun bearOP
I did update it without success, but I realised that if I do try to accesss the url towards the logo http://localhost:3000/en/JobsBringerLogoDarkAnimated.riv

It does indeed not work, gives a 404.
I think because of the fact that now we have this /en pathing that may be causing the errors.
Original message was deleted
Sun bearOP
What should I do then ? Maybe I need to update something in here ? 
// Removed
Sure thing, before that one file I didn't share is my route.ts, maybe something is wrong here:

//removed
Original message was deleted
Sun bearOP
And here is some of what I have in the network tab
Original message was deleted
Sun bearOP
It says failed to load resource
And it also says this
Sure thing. In regards with the cookies, I'm a beginner so I don't know if I'm supposed to load the logo in cookies.
Original message was deleted
Sun bearOP
Where do I find the payload ?
Original message was deleted
Sun bearOP
I see, I will try and do that. That's the way it came out from Supabase's template so I left it as it was.
When you're a beginner you try not to mess with things unless you know what you're doing 😄
Original message was deleted
Sun bearOP
Let me open it in Chrome
I think it's different in Safari
Original message was deleted
Sun bearOP
What do I need to click on for you to see it ?
Original message was deleted
Sun bearOP
If you mean in VSCode it won't open it because it's a .riv file (animation file)
Ehhh
The problem is that I've made it a component because it's using client stuff
// Removed
If I put this code inside the login page it will not work because the login page is a server page
So that's why I made it a component so that I can use the client stuff and just import it into the login page
I just imported the component inside the login page
And used it like this <RiveLogo />
Since you are on PC you can check the page too, here it is
Initially I did have the code from the rive component directly inside the login page (back when I was not using the [lang] and when the login page was a client component. But then when I switched using SSR it would give an error so I had to move the rive logo in its own component and then import it from there. That's why I have it like this.
What caused the error was this: const { resolvedTheme } = useTheme();
This error
Original message was deleted
Sun bearOP
I mean I just followed a tutorial and that's what it was said in it. All I want is for the website to have those /language/page structure.

The official documentation also recommends using the [lang] folder.

So far 3 sources recommend it.
It looks to be the standard way of setting this stuff up
https://nextjs.org/docs/app/building-your-application/routing/internationalization

Here is where the doc mentions that folder as well.
Again I only have the login page under that folder so far. I removed the (main) folder you told me to add in the meantime and the layout.tsx since the images for the input fields load correctly. However my public and components folder and whatnot are not inside this [lang] folder.

Neither are the layout.tsx and page.tsx
Also I don't know why my app folder is red.
Do I have to restart VSCode or something ?
I saved all the pages before restarting though, maybe that updated it.
Original message was deleted
Sun bearOP
nope
Like a placeholder ?
Sure, let me try
Original message was deleted
Sun bearOP
// PlaceholderImage.tsx
'use client'
import Image from 'next/image';

const PlaceholderImage = () => {
  return (
    <div style={{ width: '100px', height: '100px', position: 'relative' }}>
      <Image
        src="/codecode.jpg"  // Assuming the image is directly in the public folder
        alt="Placeholder"
        layout="fill"
        objectFit="cover"  // Adjust as needed (cover, contain, etc.)
      />
    </div>
  );
};

export default PlaceholderImage;


like this ?
I've put it in the same location as the rive component
Ok let me import it then
Original message was deleted
Sun bearOP
Same issue
Original message was deleted
Sun bearOP
I just imported the component like this import PlaceholderImage from '@/components/PlaceHolderImage';
Otherwise I could try and import the image directly instead
Without using a component
Original message was deleted
Sun bearOP
 <div className="flex-1 flex justify-center items-center w-full">
        <div className="flex flex-col items-center justify-center w-full px-8 sm:max-w-md">
          <img
            src="/codecode.jpg"
            alt="Placeholder"
            style={{ width: '300px', height: '300px' }}needed
          />
Still won't load it 😄
Original message was deleted
Sun bearOP
    <Image 
        src="/codecode.jpg"
        alt="Placeholder" 
        width={300} 
        height={300} 
        priority={true} 
      />

Still the same 😦
I added this const src = "/codecode.jpg";

but it still won't load the image.
//Removed
Original message was deleted
Sun bearOP
I was already using middleware from the get go. I think I mentioned it in the beginning.
I thought you knew that 😅
Original message was deleted
Sun bearOP
Erghh, I guess that explains the confusion then 😄
Let me know if you have a better idea now of why all those 404 errors and if it's related to the way my middleware is set-up at the moment please 😁
And this bad header error
@Sun bear js //Removed
Sun bearOP
here it is
Original message was deleted
Sun bearOP
@African Slender-snouted Crocodile
Sun bearOP
I see, well then, why it has issues with the file paths, I don't get it.

By the way, thank you for spending so much time to look into it, I really appreciate it. I wouldn't ask these many questions but without help I may not be able to figure out what I need to do in this situation cause it doesn't look like it's something a beginner could figure out easily.

I mean we've already spent a few hours so I guess this is a pretty complex issue. Either that either we're both missing something and that's why it takes so long to figure out what's going on 😄
Original message was deleted
Sun bearOP
And that's good or bad ?
Original message was deleted
Sun bearOP
That must explain why the images didn't load before when I wasn't using the image component I guess!
Oh wait wait!
I just noticed something else, lol.
For some reason I have 2 middlewares!
//Removed

This is the one under utils/supabase. I am confused, which one is actually being used and which one is not, and which one should I keep and which one I shouldn't keep. Do I need to combine the two into one ? And do I need to have it in the root or under the utils/supabase folder ? 😄
I forgot that the default supabase template came with its own middleware as well. I can't even remember if I have created the one in the root or if the template itself came with a second middleware, I think it came with both, as in it had both middlewares created from the get go.
Original message was deleted
Sun bearOP
I see, I wonder then why did they provide that other middleware then if it's not even functional ? I suppose it's sort of like an example which can be moved into the root then or something like that.
Original message was deleted
Sun bearOP
I have updated the middleware at the root like you said:
export const config = {
  matcher: [
    // Exclude certain paths from the middleware
    '/((?!_next/static|_next/image|favicon.ico|images).*)',
  ],
}

However the logo still doesn't load.
It still tries to fetch it from the /en path
Original message was deleted
Sun bearOP
I have updated that part of the code I sent above and then I restarted the server and reloaded to check.
Before updating it it was like this:
export const config = {
  // Matcher ignoring `/_next/` and `/api/`
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}
Original message was deleted
Sun bearOP
Like this ? 
export const config = {
  matcher: [
    // Exclude paths that contain 'images' from the middleware
    '/((?!images).*)',
  ],
}
Original message was deleted
Sun bearOP
Now no images load anymore
And the page looks different too 🤔
Original message was deleted
Sun bearOP
No worries. If you want we can also leave it for tomorrow.
Original message was deleted
Sun bearOP
Same here
I have reverted back the middleware now it's back to how it was before.
This is funny indeed cause I've done localization in Flutter a while ago and it was so much more easier and straight to the point.
It's not even the localization cause that works now, it's just that it caused issues that weren't there before as you can see.
Original message was deleted
Sun bearOP
Yes I initially used Flutter for my website (and I still do for the moment). It was so much more easier to work with compared to Next.js.
Original message was deleted
Sun bearOP
Awesome!
If you want to start using Flutter they have pretty awesome documentation and there's lots of packages for it. They also have an awesome server too where they help newcommers.
Whoops 😅
I mainly switched to next because of the SEO support.
Gotcha. I guess it's simple if you're used to working with react and javascript but for someone which jumped directly into Next it's quite difficult. As you can see I have issues with things which are probably considered simple stuff.
Like I have an idea what is causing this pathing issue, it's the [lang] folder but normally that shouldn't be a problem since using that folder is how it's usually done so it's probably something that just needs to be updated in one of the files in order to solve it. But see if you don't know what it is exactly then it becomes difficult to figure out cause you don't really know where to look for and what to do.
Original message was deleted
Sun bearOP
Oh, that's similar to what you said!
Original message was deleted
Sun bearOP
Hmm it looks like that's using a different set-up, different from what the official documentation recommends.
Original message was deleted
Sun bearOP
Indeed, if I can't solve it with my current set-up perhaps I need to start try doing it in a different way. I will continue tomorrow cause I'm preparing to eat and then go to sleep.

If you want we can see if we can fix it tomorrow.
Haha, well thank you very much for all your help and I wish you a beautiful rest of your day!
Here is 11pm 😄
Sun bearOP
Solved ✅
Original message was deleted
Sun bearOP
Someone else looked into it and he figured that the middleware was excluding files from the public folder. He told me to just create a new folder inside it called static, add it to the exceptions in the middleware file and move those logo files inside it and after doing that it worked, no more 404 errors.

Apparently there was also an issue opened on the repository of the tutorial I've watched with the same issue and the person that helped me pointed that out to me.
https://github.com/HamedBahram/next-i18n/issues/2
Answer