How I Create Modern E-Commerce Stores with Next.js

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/docs/integrations/...
-- my links
My SaaS (closed beta, not public yet): www.splitter.gg/
My Discord: / discord
My GitHub: github.com/joschan21

[@johnychinese]

Hey I never do this but would be really glad if you do a full project on how to use shopify with nextjs 😊

[@lovrozagar3729]

YESSS do it Josh! 🤩

[@jamesnelson174]

Yes do it Josh. Thank you

[@denvudd4492]

Yess that would be great 💯

[@paredesparedespg]

do this josh

[@ashutoshnautiyal3372]

Yes pls

[@youssefbedhief2050]

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 😁

[@JohnRod]

Yes!

[@joshtriedcoding]

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

[@bojanperic1160]

Just had the same thought 👍

[@SamirElias-ru1td]

bro make a tutorial about this is fire !

[@elhaambasheerch7058]

Would love to see a big e commerce project with Shopify & next on this channel, this seems really really good!

[@itstalhasattar]

👍

[@hussainbhagat8855]

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.

[@marcofaquim]

Awesome content. The amount of work you saved me is amazing. Thank you Josh for your hard work

[@fehlercode03]

that's probably the best and most user friendly way to implement this functionality :D

[@ahbegnueg]

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 😁

[@joshtriedcoding]

Appreciate the suggestion man, seems like many people would really like this! Grüße zurück :)

[@PlayhouseMediaGroup]

This is way cool, If you can do a full tutorial for an online shop with this

[@scarswell12]

Would love to see a full tutorial on how this can be done.

[@pauls6277]

The same can be done with Square Space too :D. Great video Josh!

[@neodinok-it3ym]

Gread video. A full-stack tutorial on Next.js store would be much appreciated

[@cosmo5805]

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.

[@lovrozagar3729]

Please do a full tutorial for this kind of project

[@scuffey2608]

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?

[@joshtriedcoding]

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

[@Invct2755]

Let's go a new video, thanks bud

[@rockydaffodil4770]

Hey Josh, I liked the video, but is there a way to automate the shipping after the client has bought the product?

[@Ikakoo2410]

Could you explain difference between invalidate queries and refetch? Their pros and cons and which is better?

[@GfoxSim]

This is really cool and simple. Wow.

[@igeajibola732]

Josh, please create a project on this concept, it's nice

[@rowsncols]

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

[@joshtriedcoding]

wish you all the best for your first gig!!

[@rowsncols]

@@joshtriedcoding thank you brother 🙏

[@tuedodev9021]

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.

[@rafaelmingossi1914]

Hey Josh you could run a small project integrating Shopify + NextJS from scratch with cart functionalities more in details =D Thanks!

[@jss_developer1432]

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 ?

[@rashzh5502]

Also Shopify offers Hydrogen, a framework built upon remix, designed for constructing storefronts.

[@itsdrvgo]

"Big ass Tshirt" - Proof that Josh watched Fireship's latest video

[@joshtriedcoding]

i actually haven't, did he use the same example?

[@kacperkowalski6862]

Video about e commerce in next js that's what i wanted always to see

[@andys_industries]

you got yourself a new follow

[@phantazzor]

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

[@jlndev]

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?

[@Ja-rz9fq]

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

[@arman3400]

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!~

[@adejesaru]

Hey! That's pretty much the situation I'm in right now! Were you able to solve it? I'm looking for exactly that

[@user-qo6jf6jk2c]

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.

[@jp.cortes]

Nice video Josh. Beside Stripe I've been using PayPal as payment option

[@AdrianGonzalezBlogs]

Can you create user accounts linked to the orders,authentication and tracking with this implementation?

[@amorto3420]

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.

[@JohnCanCode]

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. 👌

[@lukem121]

Would be more cool to see something like Medusa JS as its free/open source

[@joshtriedcoding]

I believe this does have an existing medusa integration, same with swell. I just personally prefer shopify

[@_Ja1i1]

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

[@codewithguillaume]

Man you are the best ❤

[@joshtriedcoding]

appreciate you man!

[@SamirElias-ru1td]

make a tutorial about this is fire !

[@Devertelo]

Nice video!!!

[@joshtriedcoding]

thanks bruh

[@liam2795]

holy shit this is very nice

[@fredygerman_]

Can you please make a video with Directus. Am trying to use it as a quick way to build fast

[@brynobryno]

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?

[@alexambrinos]

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.

[@Laam.333]

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.

[@joshtriedcoding]

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

[@meng4948]

waiting for video full course.

[@LabhamJain]

What are you're thoughts with medusajs?

[@Anonymousssss368]

Hey please make a vedio on Stripe payment using latest nextjs for production level applications. 🙋

[@PoliticsMaurice]

dont spill the beans gj maoite

[@lovrozagar3729]

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 😀

[@maximilianojuega17]

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?

[@victortimi]

Can you make a tutorial on this pleaseeeeee

[@codetech1165]

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

[@ahmed_osamaa]

Hi Josh, great video.I am still new to E-commerce websites, can I know if this service from shopify is paid or not ?

[@joshtriedcoding]

shopify costs money yeah

[@ahmed_osamaa]

@@joshtriedcoding ok thanks

[@squirt11e]

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

[@Shawn-Mosher]

Definitely building a store. I’m using Nextjs, Woocommerce and Stripe

[@imkir4n]

I tried but facing some difficulties in some queries. Paused atm

[@Shawn-Mosher]

@@imkir4n what queries? Are you using the rest api, woographql, or store api?

[@imkir4n]

@@Shawn-Mosher woographql + wpgraphql

[@tacopito]

what do you recommend using?@@Shawn-Mosher

[@demicoderr]

Please Josh can you do a full tutorial on this?

[@joshtriedcoding]

yeah dude seems like many people are interested

[@demicoderr]

@@joshtriedcoding we would really appreciate this 🔥✨

[@romzaar]

How can the customer view the purchase status, or purchase history, and track the orders?

[@joshtriedcoding]

we can build custom APIs for that

[@FunkyToe369]

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

[@phantazzor]

could you deploy elsewhere than vercel though?

[@datamagaldadze1134]

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.

[@joshtriedcoding]

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

[@datamagaldadze1134]

okay man thanks, can i somehow buy or connect my domain to the vercel when i deploy my application ?@@joshtriedcoding

[@kavishkahenderson5724]

What payment gateway Are you using?

[@marcofaquim]

JOSH WE NEED THE FULL TUTORIALLLL

[@avi7278]

Wow a buy button and everything!

[@martinkling3266]

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.

[@cengizkbrsl265]

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.

[@paredesparedespg]

please make a full tuTORIAL ON HOW TO DO I T

[@akifkhan2402]

I think you should complete toutorial about shopify clone with crm

[@nickwoodward819]

what's the cost involved with shopify?

[@DanielClipsTVS]

heyy. are we still getting a full video for this please josh

[@victorsaisse1340]

tutorial on this please 🙏🏼

[@ReinventedWeb]

What tool are you using to make the diagrams?

[@mortenthomsen1]

Looks like excalidraw

[@joshtriedcoding]

@@mortenthomsen1 yessir

[@ReinventedWeb]

Thank you

[@sagspot]

I created one and am handling everything myself with a strapi backend and mpesa checkout

[@gerardoluisbv]

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?

[@manshulduggal5482]

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

[@join_devhub]

Hey, shopify is a cms so why did you mention shopify and cms separately in the flowchart? A bit confused.

[@b3games146]

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

[@hassan_3975]

how did you get the codebase of the project?

[@joshtriedcoding]

the setup is linked in the description :3

[@zoltanmolnar6956]

ok it is very interesting BUT it would be more interesting if you provide us an E-com tutorial how to build, thank you

[@devhamdani]

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?

[@Proximity221]

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?

[@shmeb2528]

goat!

[@dorin6880]

Do we need to purchase shopify plan or it is free to use the api?

[@ejoojoo]

not free

[@imkir4n]

Earlier it was free but now it doesn't

[@joshtriedcoding]

It's not free unfortunately

[@_bijaydas]

Creating a backend for an e-commerce is very very very hectic

[@dukeselwood]

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

[@shreyas.sihasane]

Please make a full stack app with next js 13, and use unused tech stack till now. Please use new technologies

[@sebosamuraj]

Hi josh I wonder what you say about medusajs. :)

[@joshtriedcoding]

never tried it tbh

[@jessicafithrase8259]

How can you hide the 'Continue Shopping' button on your Thank You page?

[@devShahriar]

Would you please show us how to host it locally ?

[@BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's e-shop.

[@gamevidzist]

I've never gotten this joke. What does it mean?

[@imgeorgemore]

OMG, It even has a watermark 😓

[@joshtriedcoding]

oh man tax compliance, why is Paul Allen starting to sweat?

[@imgeorgemore]

@@joshtriedcoding btw thanks for the sneak peek of the vercel integration with shopify! this is a game changer for shopify devs!

[@lakshanmaduranga2518]

are there any way to use own api withot shopify

[@jotaroisdarius1918]

Please make a project on this, don't focus on the ui or the logic of the ecommerce website, just how to use next with shopify

[@kimbapslayer1995]

Why you need Shopify and a CMS? Can’t you just make api calls directly to Shopify?

[@joshtriedcoding]

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

[@rod6722]

How much do you typically charge for an e-commerce store like that?

[@rusruz1331]

I know its not the case ,but Shopify don't work in many countries ,like Belarus for example ,users cannot pay (

[@joshtriedcoding]

oh interesting, which payment providers do they usually use?

[@rusruz1331]

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

[@patolorde]

Which cms to use?

[@warisaremou8754]

What about the authentication ?

[@joshtriedcoding]

you can handle that however you want, like next-auth or a dedicated service

[@2012Accounts]

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.

[@joshtriedcoding]

oh yeah it can be a pain. Shopify has built-in fraud analysis afaik, rating the fraud likelihood

[@trejohnson7677]

this mf said "big ass t shirt store"

[@ignacioportigliatti2794]

But shopify is paid right ?

[@yowremco]

I've done five years of Magento 2 front-end and build dozens of shops. Neve am i touching that garbage again lol

[@joshtriedcoding]

hahahaha