Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Component using Next JS and TypeScript

Taufiq 150

@taufiqmahdi

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • What is the best practice for using SVG? Should I place svg codes in a component and then export it, or there is any better way?
  • How to use Image in Next JS, what value should we pass to width and height? because it can't be passed with full or fit like tailwind.

Community feedback

StarWolf 260

@BParadowski

Posted

Hello again,

  • Svgs: It depends on what you want to do with an svg. If you intend to use it as you would any other image you should simply use nextjs <Image> component. If you want more granular control over it (for instance to style it with css) you can convert it to a component. There is a popular library called Svgr that does it for you (and makes the components much more readable), you can demo it in the browser here and copy-paste the component into your app.
  • Height and width attributes in next <Image> define aspect ratio of your image. I could explain further but frankly you should just read the docs. The recommended way to use images in your next js app is to import them like other assets: import image from "/assets/image...." It gets transformed into StaticImageData type and you can place this object into "src" attribute of <Image> (height and width properties are then inferred automatically)

Marked as helpful

1

Taufiq 150

@taufiqmahdi

Posted

@BParadowski

I see, that explains it much! Thank you.

Hmm, that means we can pass bigger values for image that will be rendered bigger? I mean if we are going to use the image as an icon or a small avatar, we better pass smaller values right?

Again, thank you for the feedback! :D

0
StarWolf 260

@BParadowski

Posted

@taufiqmahdi

In response to your questions: no.

Read the docs :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord