
Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)
dodocoding
Firebase's SQL version! You can master the basics of Next.js full-stack development through Supabase!
Basic
Next.js, supabase, React
Clone YoutubeMusic website with React, Next.JS 14, TailwindCss, RadixUI, Shadcn, and zustand. You can master the basics of web front-end with a focus on UI, starting from NextJS basics.!
456 learners
Level Basic
Course period Unlimited


Reviews from Early Learners
5.0
김형진
I was able to practice implementing responsive components using Next.js, TailwindCSS, and Shadcn, which was very helpful.
5.0
코틀린자바
There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.
5.0
Moon
I think this is the best of the nextjs lectures~ I listened to the good lectures~
Next.js App Router
(Theory) React Suspense (Streaming, Progressive Hydration)
(Theory) Next.js rendering method and CSR, SSR, Hydration
Next.js RSC, RCC, use client
TailwindCSS, RadixUI, Shadcn
YT Music Player CloneCoding
Zustand status management
Typescript Typing Basics
How to develop a responsive UI
The NextJS technology stack is in demand among FE developers these days!
We've included only the parts you need for NextJS practice 🍭
After studying React, it is difficult to proceed with a project using NextJS by only looking at the official documentation.
So, through YoutubeMusic Clone coding, it is quick and easy,
In just one day! We've created a course to help you master NextJS.
This course can serve as the best foundation for your own NextJS project.
📌 Lecture Notes Guide: Chapter-by-chapter goals, review points, and more (official documents, concepts, etc.)
📌 Lecture checkpoints provided : Don't worry if you don't follow the code! There are chapter-specific branches.
📌 10% theory, 90% practice : We explain the most difficult concepts of rendering, server components, and hydration.
📌 Portfolio : You can get the results through clone coding.

From React to Next
I want to expand!
I know how to use React, but
If you are stuck at Next,
This course is perfect!

Next.js project
I want to make it!
Based on Next.js
If you need to do a project right away,
It will be a good guide.

Easy with clone coding
Have fun learning!
Based on a suitable code base
Expand your project with your own!
You can clone any site you see with Next.js. 😲
You can proceed with your project through Next.js AppRouter.
You can manage global status with Zustand.
You will learn about various rendering methods, including PageRouter, React CSR, SSR, and Hydration.
Vercel allows me to show off the projects I've created to others.
TailwindCSS + Radix UI + Shadcn combination allows you to develop UI faster than anyone else.

Next.js 14 AppRouter & ServerComponent
You'll learn how to structure your entire project with AppRoute. You'll also learn the theory behind when and why to use server components. Through the evolution of FE rendering, you'll learn about the history of Vanilla JS > React > NextJS PageRouter > AppRoute.

Responsive Design + Interactive Web
We're introducing a strategy that supports mobile and tablet screens. We've refined the UI with styling and details, including drawers that appear only on mobile screens. Perhaps you could wrap it in a webview and build an app from scratch?

Music Player with Zustand
Learn Player using the Zustand global state management tool. It includes detailed UI skills to enhance the user experience. You'll integrate events with Zustand to play music on any page.

UI Components & Typescript
Organize various UIs into components. And, where necessary, learn how to apply TypeScript to prevent errors in your projects.
I use Node.js, VS Code, and Github.
Basic knowledge of HTML, CSS, and React
Styling with TailwindCSS (+ a summary tutorial 😀 )
(*At first, I hated TailwindCSS. But after the initial learning curve (about an hour), it dramatically improved my development experience and sped up my development time! You won't regret it.)
Who is this course right for?
For those who want to start a project with Next.js
Anyone who wants to master publishing based on Next.js
For those who want to develop quickly using a component library
FE developers looking to expand their Next.js technology stack
Need to know before starting?
Basic HTML, CSS, React
4,324
Learners
194
Reviews
94
Answers
4.8
Rating
5
Courses
I am currently working as a frontend developer at one of the major IT service companies (Naver, Kakao, Line, Coupang, Baemin). 😀
🚀 SW Maestro Expert Career Mentoring
🚀 Experience as a Naver Boostcamp BE Mentor
🚀 FE 7Code Roadmap Course Creation
All
80 lectures ∙ (7hr 6min)
All
39 reviews
4.5
39 reviews
Reviews 3
∙
Average Rating 5.0
5
I am a junior in the field who decided to take the course because I thought I should definitely choose a path between front-end and back-end and develop my expertise. When I work on projects at my company, I never have to deal with React, so I didn't even know if I was suited for front-end or not. The lecture was easy to understand and the lectures were short, so I took my time and finished it in a month! The lecture was really fun, and it was also fun to change things according to my taste in the parts the instructor made. In the future, I plan to build a portfolio based on the completed clone site and gradually prepare to switch to front-end. Thank you~~~
100% Thank you for your review. ~ The lecture may have been a bit messy. Thank you for listening to the end. If you practice enough through this lecture, I think you will be able to create UI faster than anyone else in the future. ~
Reviews 13
∙
Average Rating 5.0
5
I think this is the best of the nextjs lectures~ I listened to the good lectures~
Thank you 100% for taking the class! I will come back with a more upgraded lecture later. ~~
Reviews 22
∙
Average Rating 5.0
5
I was able to practice implementing responsive components using Next.js, TailwindCSS, and Shadcn, which was very helpful.
Thank you for taking the course. I'll come back with even better content. !!
Reviews 5
∙
Average Rating 5.0
5
The content is really good. However, the tempo is fast, so you have to know next to understand it.
Thank you for your course review! If you have any questions about next.js or other difficult content, please feel free to ask! There may be some parts where the lecture content is lacking, so I will try my best to answer them.~
Reviews 23
∙
Average Rating 5.0
5
There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.
Check out other courses by the instructor!
Explore other courses in the same field!