Next JS & Typescript with Shopify Integration - Full Guide

Learn modern Next JS(Next 10+). Code everything in Typescript and integrate with Shopify. Professional app architecture.

4.10 (297 reviews)
Udemy
platform
English
language
Web Development
category
Next JS & Typescript with Shopify Integration - Full Guide
2,790
students
28 hours
content
Sep 2021
last update
$69.99
regular price

What you will learn

Build a modern, well-architectured app from scratch

Get most of the JS with Typescript

Create applications with real use case

Create Shopify integration

Why take this course?

What is Next.js?

Next.js is a React-based framework that provides infrastructure and simple development experience for server-side rendered(SSR) & static page applications.

  • An intuitive page-based routing system (with support for dynamic routes)

  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

What is Typescript? 

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.


Is this course right for you?

If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a professional web application inspired by the project of Next JS developers.

Start with learning the Typescript language and progress into building your own e-commerce application.

This resource is the only thing you need to start Web Development with Next.js. During this course, you will get the confidence and skills required to start your own projects. In addition, you will get the right mindset to apply for a developer career and improve in modern frameworks like Next.js and React.js.

What are you going to work on?

You will build an e-commerce application from scratch. You will learn how to write code in Typescript language, a superset of Javascript providing additional features, and a static type checker.

The course starts with an explanation and practical examples of the Typescript language. The typescript section is optional but it explains a lot of types of structures that will be used throughout the course.

After typescript lectures, you will start building your e-commerce app. You will learn how to structure the application in a modular and clean way. 

You will build your own React components from the scratch. As the styling framework, the course is utilizing PostCSS and Tailwind CSS which is a great choice for every project.

Later in the course, you will learn the latest patterns on how to use hook functions efficiently. Entire checkout functionality is built on top of the hook functions. Hooks are reactive, modular, and easy to get tested.

At the end of the course, we will hook up the application with Shopify, and we will deploy it to the Vercel platform so anyone on the internet can access it.

Screenshots

Next JS & Typescript with Shopify Integration - Full Guide - Screenshot_01Next JS & Typescript with Shopify Integration - Full Guide - Screenshot_02Next JS & Typescript with Shopify Integration - Full Guide - Screenshot_03Next JS & Typescript with Shopify Integration - Full Guide - Screenshot_04

Reviews

Andrew
March 21, 2023
This course is misdescribed. It is specifically "How to architect a Shopify app with Nextjs and Typescript". I was looking for a course teaching Nextjs using Typescript and this is definitely not that. The teaching style is very much "watch me as I code", some may like this but I prefer more structured courses that cover topics thoroughly. I picked up some useful bits, but I abandoned the course about 1/3 in. The prerequisites for this course state that only basic Javascript and no knowledge of Nextjs are required. The course teaches zero Javascript and dives into Nextjs coding with zero explanations. You definitely need reasonably good knowledge of Javascript and Nextjs before starting. For example, his first piece of code uses getStaticProps. He does quickly skip over the structure of the getStaticProps function that he is creating but if you haven't already done a Nextjs course you will have no real idea what getStaticProps is or why it is used. The course does cover things required by a Typescript beginner, but it also seems to dive immediately into more advanced stuff rather than just sticking to basics initially. While the course is structured logically regarding lessons, within each lesson you get an unstructured brain dump which can sometimes be tricky to follow because the instructor talks and types quite fast. I'm not a total beginner with Nextjs or Typescript, so I actually found useful bits because his brain dump covered things I hadn't come across. However, I didn't fully understand what was going on a few times and had to look up stuff elsewhere. Early on in the Typescript section, he gets into the weeds regarding generic types and extending interfaces, types, and classes. I presume he is doing this to demonstrate how you can implement highly typed code while still achieving any of the flexibility that can be achieved by the free for all that is Javascript. However, he doesn't explain this. Maybe I'm missing something but in my opinion, any code that makes use of all of these esoteric options he covers would be a nightmare to understand and I can't imagine doing it. In general, he seems to err on the side of complicating things even when there is seemingly very little to gain. E.g. Reusable layouts in lesson 73. Following the theme of complicating things the instructor is using Tailwind indirectly by defining CSS classes using Tailwind's @apply feature. Presumably, he is doing this to make the JSX prettier, but by abstracting Tailwind you throw away the benefit of directly applying formatting to React components in an easily readable form. The Tailwind documentation explicitly says "Whatever you do, don’t use @apply just to make things look “cleaner”, and the comments that I have found on forums suggest that most people think that this is a bad idea. Why define CSS classes using Tailwind? Why not just skip the need to learn Tailwind and define the class using standard CSS? Why define custom colours in CSS and use those definitions to define custom colours in Tailwind? Why not just define them directly in Tailwind? Early on simple examples are used to demonstrate each topic. The course does not set practice exercises and quizzes are relied upon to test that the student understands the lesson. The course cycles through the instructor re-coding iterations of the Shopify app and uses these to introduce new topics. However, topics aren't always introduced in depth just what the instructor happens to be using at that point in the coding. Lesson 76. The configuration of tailwind.config.js appears to be different now.
John
February 3, 2023
It would greatly benefit the course if the instructor put more effort into delivering the content in a clear and concise manner. Using clear explanations, visual aids, and breaking down complex concepts into smaller, more manageable pieces could greatly enhance the student's learning experience and understanding. Improving the explanation will make the course more accessible and useful for a wider range of students.
Geni
February 1, 2023
The teaching is good, if you has problem just ask in Q&A (Fast respond). But i think Definitely not for beginner
Ted
January 30, 2023
I really appreciated the project structure and how Filip organized his code. Great course -- two thumbs up!
Christopher
January 22, 2023
This course was exactly what I was looking for. This is indeed a full package of everything you need to learn. Filip is awesome!
Studioalva
December 29, 2022
good course, namun kurang test di setiap slide nya, misal jika mempelajari optional parametes harusnya ada beberapa (1 s/d 3) pertanyaan yang jawabannya harus tepat, baru user bisa next ke slide berikutnya, jika user masih salah dalam menjawab harus diulang, dan ditanya terus sampai ia menemukan jawaban yang sesuai.
Kranti
September 26, 2022
Don't listen to other reviews complaining about the english of the tutor or that there are no explanations. This course is going amazing so far and the teacher uses decent english and explains concepts as we code and also reviews them and repeats difficult areas. He has an accent but this does not equate to not using good english, and its totally understandable even to me who's english was not the first language. We make a great app and dive deep into nextjs, typescript usage, graphql, shopify integeration and just general app architecture and more. Great course.
Leo
August 16, 2022
Good content (will be able to improve the skills if you are a beginner) with a terrible English accent and poor explanation. It is hard to understand what he is sometimes saying, even with the captions turned on. Consider before buying.
Jorge
July 29, 2022
The instructor is very knowledgeable and I like his teaching style! So far no complaints in regard to course material and from what I’ve seen in the Q&A he is very helpful and committed to helping students with problems with their code. One major problem I’m currently facing is that he sometimes talks a little to fast for me, even slowing down to 0.75x playback still doesn’t help at times and anything slower is not viable. I found that headphones help although it’s not ideal since I personally don’t like using them for a long period of time. So yes, there’s still potential for the instructor’s delivery to improve. I still recommend the course especially if you’re new to typescript and want to learn Next JS with a big practical project.
Someonesgarden
June 30, 2022
You should finish this course from start to end because every lesson has nice new findings and fun to following steps. Definitely this course is the best one of learning Shopify in practical way.
Jose
April 12, 2022
El instructor habla de algunos términos sin explicarlos, asumiendo que cualquier persona debe entenderlos.
Chelsea
February 1, 2022
This is such a great course! This is the second course that I have taken by Filip Jerga and both have been awesome. Very detailed instructions and at the end you will integrate and deploy a production ready project! I would highly recommend this course.
Augustus
January 24, 2022
Instructor made great efforts to explain the Typescript concepts which I find a bit complex. I will have to do a slow review of them and am not clear of the benefits of using Typescript, as of now will stick to MERN stack
Bryan
January 6, 2022
Good course content-wise and in terms of the app architecture, just presentation of certain things could have been better. The explanations (especially for complex concepts later in the course) were sort of all over the place. I had to spend lots of time putting together diagrams of my own and making sense of a lot of things since the explanations were a bit disorganized. So I'd say overall the teaching could have been a bit more efficient, but the material itself was great and very helpful. I feel after taking the course and spending time making sense of the more complex topics, I can dive deeper into the Shopify storefront API and add more features to the app without issue.
Panji
November 26, 2021
Thank you Mr. Fillip so far this course very good for to understand typescript and integrated into nextjs but the instructor voice less clear sound

Charts

Price

Next JS & Typescript with Shopify Integration - Full Guide - Price chart

Rating

Next JS & Typescript with Shopify Integration - Full Guide - Ratings chart

Enrollment distribution

Next JS & Typescript with Shopify Integration - Full Guide - Distribution chart
4111264
udemy ID
6/9/2021
course created date
7/12/2021
course indexed date
Bot
course submited by