Submitted almost 2 years agoA solution to the NFT preview card component challenge
NFT Preview Card Component using Next JS and TypeScript
next, react, tailwind-css, typescript
@taufiqmahdi
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.
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @BParadowski
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
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