Hello. I'm tryna use <Link> to address the user to a few pages upon click. Each page has its own id, for example an uploaded video has the id "abcdefg", so to reach for it the user will have to navigate to localhost:3000/abcdefg.

When I load all the videos available, I get this error and I don't understand why. I know that <Link /> preload the route but why would this error pop up if the user is not visiting those links, yet?

full error:

Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "http:localhost:3000/" Client: "9sl98t98in"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

"9sl98t98in" would be the video id, possible to reach it at localhost:3000/9sl98t98in

code:

const Media = (props: TMedia) => {

    return (
        <div>
            <video
                height={100}
                width={100}
            >
                <source type="video/mp4" src={`${process.env.BUCKET}/${URL}#t=2`} />
            </video>

            <Link href={`/${URL}`}>
                {process.env.DOMAIN}{URL}
            </Link>

            <form >
                <MediaName 
                    value={name} 
                    {...register("name", { required: false, minLength: 2, maxLength: 20})} 
                />
            </form>
        </div>
    )
}

i semplified the code a lil bit as well.