Responsive website with Next.js and TailwindCSS

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-HasnasPosted about 1 year ago

  Hello, Semmy

  Congrats on your Nextjs project 🎉!

  Images are generally difficult to be made responsive, with or without Nextjs. What Next.js <Image> component does is prevent layout shifts.

  Images take more time to load than other elements, so by giving the Image a height and width, you tell Next.js how much space to leave for that image. When it loads, it will fit in that space created for it instead of moving things around to make space for itself. You used height and object-fit to style the Image. It is clear from the designs that all images inside country cards have the same height and width, so your solution is alright in my opinion.

  The other way is to pass the fill prop, which will assign it the property position: absoluteto the image. In this case, you can assign position: relative to the parent and it will take the space of the parent. You need to control the sizes of the parent as well either with width/height or by making it a grid or a flex item. I also did this challenge using Next.js and used the “fill” prop. You can take a look at my solution here
  In the Github repository Readme, you can see two uses cases with object-fit: cover and object-fit: contain

  I have a few comments if you don’t mind:

  • A possible improvement I can see right away is getting rid of the filteredCountries state and the useEffects that cause unnecessary re-rendering. You can find the motivation for this and a similar example in React docs You Might Not Need an Effect
  • In your app/ page.tsx file, you fetch countries on build time and then pass country data to your component, which is a client component with the logic around display. According to the documentation: by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle . So you lose the benefit of having static and server generated country cards html. Since you’re using Next.js, I encourage you to look for a solution to have the first page statically generated with the country cards. You mind find this pattern from Next.js documentation helpful. You can also check my solution, although it’s a bit different from what you’ve started with. Looking for a solution yourself will help you understand Nextjs better 🙂

  Marked as helpful

  0

  ---

  

  Semmy•50

  @JSdevS-coderPosted about 1 year ago

  @Catalina-Hasnas Thank you very much for this detailed comment and all the advice and links you put, I will make sure to go through all of them. For a long time, I was doing projects with React so somehow I always go for the state when I have something that should be changeable that is also something that I have struggled with a bit since I started doing projects with Next.js. I will try to update my project with your recommendations thank you one more time for writing your opinion.

  1