Skip to content
Submitted 4 months ago

Product preview card component using Next.js

TKD04•70
@TKD04
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?
  • Art direction with image optimization from Next.js using getImageProps() did not work

It works in dev and build on local, but on deployment, Next.js removes srcSet from source elements. 🤔 I tried to fix the problem by searching on the web but I did not find a solution that worked, so I used normal art direction.

Community feedback

  • Manpreet Singh•190
    @Manpreet-01Posted 4 months ago

    i am wondering how you deploy nextJs project on github pages ?.

    please give some clue / idea.

    thanks.

    1
    TKD04•70
    @TKD04Posted 4 months ago

    Hello @Manpreet-01!! Thanks for the comment!

    I used GitHub Actions to deploy to GitHub Pages. There is a templete settings file for Next.js to deploy which I used. so I did not do any difficult settings manually.

    Here is what I did to deploy Next.js on GitHub Pages:

    1. Create Next.js project on local by create-next-app
    2. Push it to GitHub
    3. From the repository page, add GitHub actions for Next.js
    4. Commit added files from browser

    Then I push any commits, it will automatically deploy. 😁

    1
    Manpreet Singh•190
    @Manpreet-01Posted 4 months ago

    @TKD04 Thanks for the replying my comment.

    1

Please log in to post a comment

Log in with GitHub

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