The context is that I am building a NextJS WebApp. In this application, i have a component page which is going to be a pattern for other three pages, only changing the styles and some other minor things (that way, i’m passing props to it). The big problem is that i have a page which load this component, but it’s styling (css) doesn’t work immedialy, but when i refresh the page, i really don’t know what is happening

This is the first page

`import audioSoftware from ‘../assets/audio_software.jpg’
import eletronicComp from ‘../assets/eletronic_comp.jpg’
import guyWithAGuitar from ‘../assets/guy_with_a_guitar.jpg’

const path = require(‘path’)

import Link from ‘next/link’

import ‘../styles/landingPage.css’

export default function LandingPage() {

return(
    <div>
        <h1 className='text-center mb-2 text-white text-2xl tracking-wider'>Por onde quer começar a estudar?</h1>
        <div className="container">
            <Link href="/audio_software/post?page=1"> // Here is the Link for the page
                <div className="box box-1">
                    <p>Audio Software</p>
                </div>
            </Link>

            <div className='box box-2'>
                <p>Tecnologia Musical</p>
            </div>

            <div className='box box-3'>
                <p>Composição Eletrônica</p>
            </div>
            
        </div>
    </div>
)

}`

This is the referenced page, which imports the component page

`import PagePattern from ‘../../component/pagePattern’

export default function AudioSoftwarePage(params) {

return(
    <div>
        <PagePattern/>
    </div>
)

}

`

and here is the component page

`’use client’

import Link from ‘next/link’
import ‘../styles/pagePattern.css’

import Image from ‘next/image’
import qualquer_img from ‘../assets/audio_software.jpg’

export default function PagePattern() {

return(
    <div>
        <div className="container">

            <div className="header">
                <Link href="/">
                    <h1 id="logo_text">CesMusic</h1>
                </Link>



                <input 
                    type="text" 
                    name="search" 
                    id="search" 
                    placeholder="Pesquise alguma postagem aqui" 
                />

            </div>

        </div>
    </div>
)

}
`