The third installment in the One Bite series! This is the kindest and most detailed Next.js course in the world. We’ll explore not only the App Router but also the Pages Router through hands-on projects.
6,016 learners
Level Basic
Course period Unlimited
Reviews from Early Learners
5.0
Next
I was able to learn a wide range of concepts from basic to advanced in Next.js. In particular, I was able to easily understand complex topics that might be difficult to understand through visual materials and animations. The lecture content is well organized in stages, so even beginners can follow along without difficulty, and I think even intermediate and above developers can learn a lot from this lecture. In addition, not only did I learn the grammar, but I also learned the theoretical aspects of Next.js's operation, internal mechanisms, SSR, SSG, ISR, and various methods in depth, as well as methods that can be applied to actual projects, which was very helpful. Thanks to the instructor's careful preparation and effort, learning Next.js was really fun and rewarding. Thank you very much!
5.0
itjustbong
I am leaving a review because I was very satisfied with the lecture! I am a front-end developer, but I have been stuck on the Page Router stack for a long time. I have tried App Router, but I kept using Page Router because of my familiarity with it... But I thought I would try to follow the latest trends by taking this lecture, and the quality was much higher than I expected. One of the reasons I kept going back to Page Router was that I didn't understand App Router properly. By taking this lecture, I was able to understand how App Router works, and I gained confidence in App Router while working on a small project. If I had any wishes for the next lecture, it would be nice to have a practical (or advanced) version that includes all the settings because sometimes when you set up App Router, the design system or other libraries don't work properly, making it difficult to set up! Thank you!
5.0
dla1434
I don't usually leave course reviews...but I'm so satisfied with this lecture that I'm leaving one. First of all, I've watched several Next lectures, but most of the time, they just tell you how to use it and move on when it's hard to explain in the lectures, so I always wondered why I should use it and what's different. Even when I looked at the official documentation, there were many ambiguous parts, so there were parts that I didn't understand. But after watching this lecture, I understood most of it. First of all, the explanations and materials are easy to understand, and after explaining the theory, they showed it again through practice, so this lecture was the best lecture I've seen by Jeong-Hwan. The previous lectures were good, but I think it's the result of a lot of thought and feedback. I'm really looking forward to the next lecture~~ I think it would be good if Next produced a practical lecture.
Explore the latest Next.js concepts.
We cover most of the concepts from the Page Router to the App Router.
Explore various concepts such as server components, page routing, layout configuration, data fetching, streaming, and deployment.
Click the image to go to the roadmap.
> Roadmap link: https://link.onebitefe.com/r/68zgsv
Series course links
> Bite-Sized React:https://inf.run/v3XAj
>Bite-Sized TypeScript: https://inf.run/FpLm4
>Bite-Sized Next: https://inf.run/v3XAj
Thanks to all your love and support, this course has also been published as a book. I sincerely thank you all 🙇♂
Bite-Sized Next.js | Official Trailer
💡 What is Page Router?
The router used before Next.js version 13
provides intuitive and stable functionality
💡 What is the App Router?
The latest router introduced after Next.js version 13
Provides the latest features, such as streaming and Server Actions
The App Router, newly introduced in Next.js 13, was created to address the shortcomings of the Page Router.
Even in an era when AI writes code for us, it is difficult to properly understand the mechanisms of the App Router without an understanding of the Page Router.
Therefore, this course will quickly cover Page Router (5 hours) before diving into App Router (10 hours). Through this, you will gain an in-depth understanding of the limitations of the existing Page Router and how App Router overcomes them.
⚠ But don't get me wrong—this course focuses on the App Router.
Next.js has many features with complex mechanisms.
Therefore, they are difficult to explain sufficiently using only static visual materials.
This course includes intuitive animations like the ones below.
Visual materials related to React Server Components
Visual materials related to the Client Router Cache
To explore Next.js’s various caching features in a more realistic environment, we provide
a custom-built backend server.
Backend Server API Documentation
Before diving into the main learning content, let's explore what Next.js is
and why it is receiving so much attention today.
Section 1. Introducing Next.js.
Section 1. Introducing Next.js.
(Optional) Quickly explore the Page Router, which has been provided since the early release of Next.js, along with a project.
At the same time, we'll also examine the inconveniences and technical limitations of the Page Router.
Section 2. Introducing the Page Router
Section 2. Introducing the Page Router
The center of attention! We take a look at the App Router. Learn what the App Router is, how it differs technically, and its basic usage.
Section 3. Getting Started with the App Router
Section 3. Getting Started with the App Router
Learn about data fetching using Server Components.
We will also explore the various caching mechanisms provided by Next, including the Data Cache and Request Memoization.
Section 4. Data Fetching
Section 4. Data Fetching
We take an in-depth look at the App Router's page caching: the Full Route Cache and the Client Router Cache.
We also explore the Route Segment Config, which lets you forcibly configure a page's caching options.
Section 5. Page Caching
Section 5. Page Caching
We explore streaming, which helps render the parts of a page as soon as they are ready.
We cover both approaches: using a Loading file and using Suspense.
We will also explore error handling using an Error file and how to recover the page.
Section 6. Streaming and Error Handling
Section 6. Streaming and Error Handling
We explore Server Actions, which generated a lot of excitement when they were first released.
We also learn how to use Server Actions to add or delete data and handle loading and error states.
Section 7. Server Actions
Section 7. Server Actions
Learn about the parallel routes and intercepting routes newly provided in the App Router.
Using these, you will implement a feature that displays specific pages as modals without interrupting the user's navigation.
Section 8. Advanced Routing Patterns
Section 8. Advanced Routing Patterns
Explore optimization methods for images, metadata, pages, regions, and more.
Deploy the optimized project to Vercel and further improve its performance.
Section 9. Optimization and Deployment
Section 9. Optimization and Deployment
Just as the same food can taste better when it looks appealing
we believe that even when explaining the same concept, more intuitive and engaging visual materials are easier to understand.
Therefore, I worked tirelessly to create intuitive visual materials, including animations.
When new terms or concepts were introduced, I did not give a cursory explanation and move on or assume that you already knew them. I made every effort to ensure that you would not need to Google anything separately while listening to the lecture.
To keep all of you engaged, whenever new content appears during the lecture, I always consider its coherence with the preceding material and whether it might feel like the flow is suddenly interrupted while creating the lecture.
Since you’ll be listening to my voice for a long time, I always strive to maintain good vocalization and diction.
To this end, I created the course so that you can understand everything even when playing it at 2x speed.
Give it a listen! 2x playback link
We gather in a community exclusively for students, share knowledge and news with one another, and grow together.
Naver Cafe: https://cafe.naver.com/winterlood
Open chat room: Please check the class materials for the participation link.
This course is optimized for those with basic knowledge of React.js and TypeScript.
However, for TypeScript, we will provide additional explanations and supplementary learning materials throughout the course, so
you should be able to follow along without difficulty except when it comes to writing types.
If you are proficient with Page Router, you may skip Section 2 and start learning directly from Section 3.
However, you need to accurately assess your understanding of Page Router’s limitations and characteristics.
INFCON2023 - Why Does TypeScript Behave That Way?
(Book) Introduction Video to “React: Bite-Sized”
Who is this course right for?
Students of the One-Bite series
For beginners just getting started with Next.js
Those who want to learn using the latest version of Next.js
Those looking for a kind and detailed lecture
Need to know before starting?
React.js (Basics)
TypeScript (Basics)
Inflearn Verified
Career Verified
44,967
Learners
3,485
Reviews
1,787
Answers
4.9
Rating
34
Courses
There is always a way to explain anything easily!
YouTube: https://link.onebitefe.com/r/8n6pxm
📚 books
"(Revised Edition) Bite-Sized React" published
"A Bite-Sized Next.js" Published
"A Bite-Sized React" published
🏆 Award
2025 Inflearn Year-End Awards Bestseller Winner
2024 Inflearn Year-End Awards Learners’ PICK Award Winner
2023 Inflearn Year-End Awards Learners’ PICK Winner
📹 Course
Bite-Sized Vibe Coding
Bite-Sized React.js Practical Project – Social Media Edition
Bite-Sized Next.js
TypeScript in Bite-Sized Pieces
Bite-Sized React
All
66 lectures ∙ (15hr 33min)
Course Materials:
11. 2.3) Navigating
07:12
12. 2.4) Prefetching
14:35
13. 2.5) API Routes
06:13
14. 2.6) Styling
09:16
28. 2.20) Deploying
12:18
All
636 reviews
5.0
636 reviews
Reviews 9
∙
Average Rating 5.0
Reviews 4
∙
Average Rating 5.0
Reviews 15
∙
Average Rating 5.0
5
Next.js lecture? Lee Jung-hwan. React.js lecture? Lee Jung-hwan. TypeScript lecture? Lee Jung-hwan. It's official. Memorize it. It'll hit your head with visual materials and dictionaries. Still not paying? It's hard to read. If there are concepts that are difficult or confusing to answer the questions below, please pay. It'll help. 1. Please explain the differences between React and Next.js from the perspective of TTV and TTI. 2. Please explain Next.js pre-rendering. 3. Please explain Next.js prefetching. 4. When does Next.js hydration occur? 5. When does Next.js data fetching occur? I didn't know anything, but now I can answer. It kindly feeds you visual materials. If you forget, it'll be brought up for review and hammered into your head. I originally didn't want to leave a review like this, but I couldn't help but leave a review because it was obvious that you were trying to improve the quality of the lectures. The really scary thing is that you can get this much from the lectures, even though it's only the beginning. (Let's stop worrying and go pay. I don't think anyone would do it, right?)
Reviews 4
∙
Average Rating 4.3
5
I don't usually leave course reviews...but I'm so satisfied with this lecture that I'm leaving one. First of all, I've watched several Next lectures, but most of the time, they just tell you how to use it and move on when it's hard to explain in the lectures, so I always wondered why I should use it and what's different. Even when I looked at the official documentation, there were many ambiguous parts, so there were parts that I didn't understand. But after watching this lecture, I understood most of it. First of all, the explanations and materials are easy to understand, and after explaining the theory, they showed it again through practice, so this lecture was the best lecture I've seen by Jeong-Hwan. The previous lectures were good, but I think it's the result of a lot of thought and feedback. I'm really looking forward to the next lecture~~ I think it would be good if Next produced a practical lecture.
Reviews 7
∙
Average Rating 5.0
5
I am leaving a review because I was very satisfied with the lecture! I am a front-end developer, but I have been stuck on the Page Router stack for a long time. I have tried App Router, but I kept using Page Router because of my familiarity with it... But I thought I would try to follow the latest trends by taking this lecture, and the quality was much higher than I expected. One of the reasons I kept going back to Page Router was that I didn't understand App Router properly. By taking this lecture, I was able to understand how App Router works, and I gained confidence in App Router while working on a small project. If I had any wishes for the next lecture, it would be nice to have a practical (or advanced) version that includes all the settings because sometimes when you set up App Router, the design system or other libraries don't work properly, making it difficult to set up! Thank you!
Check out other courses by the instructor!
Explore other courses in the same field!
![From JavaScript to React [PART 3/4]: The Road to React Without Giving UpCourse Thumbnail](https://cdn.inflearn.com/public/courses/335782/cover/b175251c-0245-4863-889e-ec3ca7d3c723/335782.png?w=420)
![[Code Factory] [Beginner] Complete Typescript Course from Code Factory in Just 8 HoursCourse Thumbnail](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?w=420)
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
![[Fullstack Introduction] Supabase, 10x Better Than FirebaseCourse Thumbnail](https://cdn.inflearn.com/public/courses/334439/cover/9e628f60-3721-4d03-b36d-a577593b96fd/334439.jpg?w=420)
![# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?w=420)
![Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]Course Thumbnail](https://cdn.inflearn.com/public/course-326181-cover/d012cab3-58e1-45cd-899e-03f86c7b1df1?w=420)
![[Code Factory] [Beginner] NestJS REST API Backend Complete Conquest Master Class - NestJS CoreCourse Thumbnail](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?w=420)