does next link has built in style

Question

Next Link ruin my style (display flex)

 <main>
      <div className="flex">
        {res.results.map((movie) => (
          <Image
            src={imagePath + movie.poster_path}
            width={500}
            height={500}
            alt={movie.title}
            className="w-full object-contain max-h-40"
          />
        ))}
      </div>
    </main>

<main>
      <div className="flex">
        {res.results.map((movie) => (
          <Link href={`/${movie.id}`}>
            <Image
              src={imagePath + movie.poster_path}
              width={500}
              height={500}
              alt={movie.title}
              className="w-full object-contain max-h-40"
            />
          </Link>
        ))}
      </div>
    </main>

I tried not using tailwind, pure css but still the same. This problem of mine was for 2 weeks already. I just want to replicate my react js code to next 13. Please someone help me!! Thanks a lot!!

Please write out the code instead of image. It easier to help you. — Wahlstrommm, Apr 30 '23 at 14:03

Wahlstrommm · Answer 1 · 2023-04-30T14:25:16.583

0

Can you not create a div that wraps around the image? That will have the w-full and max-h-40 and that set the image to fill it out?

And answer to your question on if Next Link has any built in style? No is hasn't.

<main>
  <div className="flex">
    {res.results.map((movie) => (
      <Link href={`/${movie.id}`} key={movie.id}>
        <div className="w-full max-h-40">
          <Image
            src={imagePath + movie.poster_path}
            width={500}
            height={500}
            alt={movie.title}
            className="w-full h-full object-contain"
          />
        </div>
      </Link>
    ))}
  </div>
</main>

edited Apr 30 '23 at 14:25

answered Apr 30 '23 at 14:14

Wahlstrommm

684
2
7
21

I tried your code but it doesn't work. maybe there a bug on using next link with display flex? – Ronell Villamil Apr 30 '23 at 14:34
You are sure that you don't have any CSS or other styles from your previous tries that's kicking in? And that the list of movies are the same from before? The second pic has like 5-6 more movies. – Wahlstrommm Apr 30 '23 at 14:48
on the 1st image that the design i want to achieve just like Netflix, Also to enable scroll on x axis. on 2nd image when I put next link it display all image. there are 20 image in total as per request. I only used global.css with tailwind config. lastly if next link has no built in my question is why he destroy/ruin the display flex – Ronell Villamil Apr 30 '23 at 14:53
When you click on a Link component, it triggers a page transition, and during the transition, Next.js removes the old page and renders the new page. So any style and that may be affected will not always behave as expexted and that's why I try to wrap it around a div first. – Wahlstrommm Apr 30 '23 at 14:57
I copy your code but it didn't work. Maybe there's a bug. Also can I request if you could try on it to your own. I just transition from react js to next, and I don't have any problem on implementing it on react js (react-router-dom). Thanks for the help. I appreciate it :) – Ronell Villamil Apr 30 '23 at 15:08

does next link has built in style

1 Answers1