Submitted about 2 months ago

Product preview card component using Next.js

TKD04• 70

@TKD04

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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-01

Posted about 2 months ago

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

please give some clue / idea.

thanks.

TKD04• 70

@TKD04

Posted about 2 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:

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

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

Manpreet Singh• 190

@Manpreet-01

Posted about 2 months ago

@TKD04 Thanks for the replying my comment.

Please log in to post a comment

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