How I Create Modern E-Commerce Stores with Next.js
HTML-код
- Опубликовано: 15 дек 2024
- Adding payments to your store can be scary. What if you do something wrong? Well, it's actually not hard. Here's an approach I find really cool, and getting set up is pretty easy with this template too. Especially for freelance projects this is great.
Setup guide: vercel.com/doc...
-- my links
My SaaS (closed beta, not public yet): www.splitter.gg/
My Discord: / discord
My GitHub: github.com/jos...
Hey I never do this but would be really glad if you do a full project on how to use shopify with nextjs 😊
YESSS do it Josh! 🤩
Yes do it Josh. Thank you
Yess that would be great 💯
do this josh
Yes pls
I think it would be very interesting if you do a full project on how to create an e-commerce app with shopify and next.js 😁
Yes!
oh hell yeah. I think many people are used to stripe for this, but credit cards are not nearly as common elsewhere as in the US
Just had the same thought 👍
bro make a tutorial about this is fire !
Would love to see a big e commerce project with Shopify & next on this channel, this seems really really good!
👍
This is way cool,
If you can do a full tutorial for an online shop with this
Hey there Josh!
Thanks for your informative videos! I would be really excited if you could upload a full video where you build a shop exactly in this manner. I love how it's so fast, allowing customers to quickly access the product page without waiting. Since I'm not familiar with all the steps, a comprehensive project video would be fantastic, and it would greatly assist me (and probably many others) as well.
If you could construct a shop from scratch, starting from zero, I'd be extremely delighted if you could showcase everything. I'm eager to learn how to program a shop like this, and I can only do it with your guidance!
Grüße 😁
Appreciate the suggestion man, seems like many people would really like this! Grüße zurück :)
Thanks man. Most channels just show long tutorials for doing this but dont explain how it works. You're the best!
Been doing it like this aswell but there were always 2 things that bothered me:
- Persisted login state (between the frontend and the hosted checkout page)
- Hooking up to shopify builtin analytics page.
Did you figure that out?
that's probably the best and most user friendly way to implement this functionality :D
Hey Josh, love all your videos which are crisp and on point. Would love some in-detail videos like tutorials or projects like creating an e-commerce app using Shopify and nextJS.
Please do a full tutorial for this kind of project
What's the point of building your own UI and paying for Shopify? Why not just embed Stripe at that point and not pay Shopify?
you are paying for the admin dashboard + stripe you have to do some logic to get it done and in the long run shopify is scalabe and battle tested , not like your crappy code
Please Josh can you do a full tutorial on this?
yeah dude seems like many people are interested
@@joshtriedcoding we would really appreciate this 🔥✨
Thanks man It's so crazy how I got my first client a few days ago requesting an e-commerce, and first your 1,000$ video then this! must be a sign
wish you all the best for your first gig!!
@@joshtriedcoding thank you brother 🙏
Bro! You're a lifesaver, my job is asking me to redo their entire ecommerce shop, from the code to design, with a shopify backend (and I already know NextJS, Tailwind, Typescript, etc). If you do a full project video that would help me (and judging by the comments) and others so much. PleasE!~
Hey! That's pretty much the situation I'm in right now! Were you able to solve it? I'm looking for exactly that
I like your videos. It´s an older video, but just one thought. Being myself working with Next JS (and despite some concerns I like it) going with shopify as CMS I would definetely consider Remix as JS frontend instead, because the guys from shopify buyed Remix end of 2022, so in the long run I guess it´s easier in combination with Remix I assume. Or in other words: Changing the frontend later is much easier than changing your CMS. Keep the vibe going.
"Big ass Tshirt" - Proof that Josh watched Fireship's latest video
i actually haven't, did he use the same example?
Would be more cool to see something like Medusa JS as its free/open source
I believe this does have an existing medusa integration, same with swell. I just personally prefer shopify
i dont undertsand where the CMS come into play in this setup? i see your storing the products and sales directly in shopify, i dont see the need of an CMS.. can you explain this please?
hey Josh great content!! could share (maybe a video) on how you handle design for your freelance work? do you work with a designer? design your self? or ask the customer to bring their own design?
Sometimes they already have an idea or even a designated design team. If not, using TailwindUI and shadcn/ui works wonders for creating a beautiful UI quickly
heyy. are we still getting a full video for this please josh
everything was nice until the success url for the payment process, it redirects you to
shopify’s default template theme website builder, Josh if you found a solutions please tell me or any of the you guys could help me to solve this
How can you hide the 'Continue Shopping' button on your Thank You page?
How would you approach building a portfolio/company website with multiple subpages, blog, contact forms, etc. with everything being customizable via CMS? What CMS to choose? Go headless or use “good” old wordpress + next? Start with a template or create everything from scratch?
Hi, I was also interested in finding the best way to do it in 2023. After some research, I think Astro for frontend + a headless CMS like Strapi is the way to go. You can even use markdown files if you will have a project without the need for a CMS.
I've built several sites like this for non tech-savvy clients and I've found the best / most customizable CMS to use with the Next app router is Sanity. You can quickly setup an embedded studio inside a route in your app, define your schemas and you're good to go. For contact forms / newsletters react-hook-form + sendgrid is a good option, maybe even react-email + resend if you're mainly doing transactional emails. If the client is tech savvy you could go the markdown route and use contentlayer + mdx.
wordpress + react is a totally valid approach. I've usually used sanity cms for freelance work in the past, it's pretty intuitive for clients and you can query data in a graphql-kinda way. But there is no typesafety unless you use some additional modules, there might be better options
Also Shopify offers Hydrogen, a framework built upon remix, designed for constructing storefronts.
i think this will work for a small-medium store. Shopify does not support multichannel POS very well. Any ideas on that case?
Hmm. What's the CMS for if the products are in shopify?
Thanks Josh! I was looking for a video like this, just to make sure if I should use shopify when creating websites with modern frameworks like nextjs. Since I always saw people using shopify with templates, I was wondering if any client would even want to pay extra for a custom build.
sorry I wanted to add, versus the hydrogen remix version starter project do you get similar project? with pre-build SSR components/components? I'd like to keep going with next and not remix but I'd like to know the pros and cons besides having to learn remix
Awesome content. The amount of work you saved me is amazing. Thank you Josh for your hard work
Can you create user accounts linked to the orders,authentication and tracking with this implementation?
So i like the route youve gone but is it possible to load that checkout page as a modal so you dont redirect the user away from the store. if anyone knows if thats possible or even a good idea. Id love feedback
comment changer les photos des produits sur l'app traduction CMS shopify
Could you explain difference between invalidate queries and refetch? Their pros and cons and which is better?
Hi Josh, this video use about Shopify+ Next js for getting benefit on headling payment. And also 1 video using payload+stripe+Next. What are the pros and cons? As I know, payload is free but Shopify is $89 per month but with better storage management. Any further discuss about this? Thanks
Hi, Can you tell me that if create a theme using this stack would i've to pay both for shopify and hosting service or not?
Please answer my question if anyone knows?
Josh, please do a headless Shopify/Bigcommerce full project tutorial with auth, payment and deployment. Currently there is no in-depth tutorial for this anywhere on youtube.
Thanks 😀
Sorry, I speak Spanish and I'm trying to understand, exactly in the shopping cart part, does it mean that the products are saved in a database? That is, wherever that user logs in, will they be able to see their products?
Hey Josh, great video! I was wondering why you are using Shopify when you as an experienced nextjs dev can set up an own dashboard for products and orders. What's the reason behind this? Im currently building an ecommerce store and just stumbled upon your video.
Hey Josh, I liked the video, but is there a way to automate the shipping after the client has bought the product?
The same can be done with Square Space too :D. Great video Josh!
Gread video. A full-stack tutorial on Next.js store would be much appreciated
Great idea, unfortunately Stripe is not supported in my country (Bosnia). Are there any other solutions for creating a business, shop or whatever its called on Shopify without Stripe, i mean is there any alternatives like credit cards or stg like that...
Love your videos.
I recently came across a headless backend for ecommerce called swell, any chance you could do a tutorial on how to integrate that with next.js 13, that would be amazing !!!
Do you by chance know if you can do the same thing just using square instead of shopify?
Would you please show us how to host it locally ?
are there any way to use own api withot shopify
hey Josh, i am trying to make my Next.js application official, i bought the domain but i don't know what to write in .htacess so that when user enters my domain it should render page.js and so on.
no idea what you're doing tbh, never heard of that. For Next deployment I use both vercel and amplify, they make it very easy to get up and running
okay man thanks, can i somehow buy or connect my domain to the vercel when i deploy my application ?@@joshtriedcoding
Hi Josh, great video.I am still new to E-commerce websites, can I know if this service from shopify is paid or not ?
shopify costs money yeah
@@joshtriedcoding ok thanks
Can you please make a video with Directus. Am trying to use it as a quick way to build fast
Would love to see a full tutorial on how this can be done.
What are you're thoughts with medusajs?
Yup, did this exact method but payment was fulfilled with crypto on the frontend and then shipping costs are handled by the shopify hosted page
How can the customer view the purchase status, or purchase history, and track the orders?
we can build custom APIs for that
what's the cost involved with shopify?
Can you make a tutorial on this pleaseeeeee
stripe and all is cool but i always wonder how do people actually implement their own custom gateways and all... i once tried to do it and never came close L
How much do you typically charge for an e-commerce store like that?
Which cms to use?
What payment gateway Are you using?
Love your videos! Can you make a video about how to structure a scalable, complex, enterprise-level app using Next.js? I find the Atomic Design Methodology very interesting. Is it scalable? Why or why not? I think it would make a great idea for a video.
Why you need Shopify and a CMS? Can’t you just make api calls directly to Shopify?
yeah that's what we're doing here, shopify is the cms we get all the products and collections from. Might be a bit unclear from the diagram, I just meant their "CMS" functionality
Hi josh I wonder what you say about medusajs. :)
never tried it tbh
That’s one of the approaches which sounds nice but don’t really work in practice. In that checkout page if user click back they face up wtih your shopify online store.
Hey, shopify is a cms so why did you mention shopify and cms separately in the flowchart? A bit confused.
Wow very cool! I’ve only built a SAAS with one type of membership so, this sounds more robust eccommerce! I’m sure this is one good way , Wordpress has woo commerce , I wonder if there are other good platforms/ services that we ca use to achieve this with nextjs ?
I know its not the case ,but Shopify don't work in many countries ,like Belarus for example ,users cannot pay (
oh interesting, which payment providers do they usually use?
Woocommerce with bank extension ,this is honestly depressing ,because stripe and Shopify is great ,but not working for the Eastern Europe ,there is no good alternatives @@joshtriedcoding
how did you get the codebase of the project?
the setup is linked in the description :3
Great topic. Can I could use this stack for a ticket sales platform for music festivals? It is common for many customers to compete for a small amount of tickets as a phase ends. I want to harness the power of nextjs and the thoroughness of shopify to securely handle many users paying at once. I also want to implement ticket reservation when a user adds to cart, and release tickets if a user takes too long to complete checkout. Is this possible with headless shopify? If someone could let me know that'd be great. 👌
Nice video Josh. Beside Stripe I've been using PayPal as payment option
This is really cool and simple. Wow.
I don't get this. Surely with this you're still paying for Shopify (which is expensive) and not making use of what that money gets you (all the templates, pro made front-end etc). Or is the Shopify API free/cheap to use?
Thanks
Do we need to purchase shopify plan or it is free to use the api?
not free
Earlier it was free but now it doesn't
It's not free unfortunately
What about the authentication ?
you can handle that however you want, like next-auth or a dedicated service
This was a very high level video, it would be better if you would have explained how you actually did the setup of this project.
Impressive, very nice. Let's see Paul Allen's e-shop.
I've never gotten this joke. What does it mean?
OMG, It even has a watermark 😓
oh man tax compliance, why is Paul Allen starting to sweat?
@@joshtriedcoding btw thanks for the sneak peek of the vercel integration with shopify! this is a game changer for shopify devs!
Please make a full stack app with next js 13, and use unused tech stack till now. Please use new technologies
Fun fact: The cart now uses Optimistic hook
Josh, please create a project on this concept, it's nice
Video about e commerce in next js that's what i wanted always to see
What tool are you using to make the diagrams?
Looks like excalidraw
@@mortenthomsen1 yessir
Thank you
How's the state of credit cards frauds? I've been told by other devs to avoid it as much as possible because dealing with it is a pain in the ass. I have no idea cause I've never tried.
oh yeah it can be a pain. Shopify has built-in fraud analysis afaik, rating the fraud likelihood
given allot can go wrong implementing payments on your own wouldn't it provide some value to create a tutorial implementing it from the start?
Hydrogen looks really cool too, but I couldn't seem to try it out on a dev store without paying so I said screw that lol
Hey Josh you could run a small project integrating Shopify + NextJS from scratch with cart functionalities more in details =D Thanks!
Definitely building a store. I’m using Nextjs, Woocommerce and Stripe
I tried but facing some difficulties in some queries. Paused atm
@@imkir4n what queries? Are you using the rest api, woographql, or store api?
@@Shawn-Mosher woographql + wpgraphql
what do you recommend using?@@Shawn-Mosher
please make a full tuTORIAL ON HOW TO DO I T
Hey Josh;
Appreciate for all efforts getting hard things to easier for us. I have a problem with last nextjs version. Could anyone face with this problem. My website showing html chunks on the browser if left for a period of time.
I created one and am handling everything myself with a strapi backend and mpesa checkout
JOSH WE NEED THE FULL TUTORIALLLL
I think you should complete toutorial about shopify clone with crm
A comprehensive video on webhooks in NextJs will be very helpful. I was looking for one and couldn't find one. BTW I love the sound mixing of your videos, it is always so on point.
I used Stripe Webhook, maybe I can help you.
Creating a backend for an e-commerce is very very very hectic
But shopify is paid right ?
Let's go a new video, thanks bud
Hey josh i have been watching your videos constantly from a long time 🙂
A detailed video on the file structure of this next.js commerce template please 🥺
In which we can understand the code
Hey please make a vedio on Stripe payment using latest nextjs for production level applications. 🙋
Man you are the best ❤
appreciate you man!
tutorial on this please 🙏🏼
ok it is very interesting BUT it would be more interesting if you provide us an E-com tutorial how to build, thank you
waiting for video full course.