inflearn logo

Bite-sized Next.js

The 3rd installment of the "One Bite" series! This is the world's most friendly and detailed Next.js course. We will explore not only the App Router but also the Page Router through hands-on projects.

(5.0) 560 reviews

5,390 learners

Level Basic

Course period Unlimited

React
React
TypeScript
TypeScript
Next.js
Next.js
React
React
TypeScript
TypeScript
Next.js
Next.js

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

Next

100% enrolled

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

74% enrolled

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

92% enrolled

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.

What you will gain after the course

  • Explore the latest Next.js concepts.

  • We will explore most concepts, from the Page Router to the App Router.

  • We 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 Lecture Links
> One Bite React:https://inf.run/v3XAj
One Bite TypeScript: https://inf.run/FpLm4
One Bite Next.js: https://inf.run/v3XAj

Thanks to your great support, this course has been published as a book. I sincerely thank you. 🙇‍♂

  • One Bite Next.js | Official Trailer

Bite-sized Next.js: Still effective in the AI era

15 hours of content,
covering everything from Page Router to App Router

💡 What is Page Router?

The router used prior to Next.js version 13
Provides intuitive and stable features

💡 What is App Router?

The latest router released after Next.js version 13
Provides cutting-edge features such as Streaming and Server Actions

The App Router, which newly appeared starting from Next.js version 13, was introduced to compensate for the shortcomings of the Page Router.
Even in an era where AI writes code for you, it is difficult to properly handle the mechanisms of the App Router without an understanding of the Page Router.

Therefore, this course is structured to quickly review the Page Router (5 hours) and then dive deep into the App Router (10 hours). Through this, you will gain a deep understanding of the limitations of the existing Page Router and how the App Router overcomes these challenges.

⚠ However, please do not misunderstand; this course is centered around the App Router.

No more static visuals
Explore Next.js with intuitive animations

Next.js has many features with complex mechanisms.
Therefore, it is difficult to explain them sufficiently with static visual materials alone.
This course is accompanied by intuitive animations like the ones below.

Visual materials related to App Router Layout

Visual materials related to React Server Components

Visual materials related to React Server Components

Visual materials related to Client Router Cache

To make it as close to a real-world situation as possible, 🚧
we provide a custom-built backend server for hands-on practice.

To examine Next.js's various caching functions in a more realistic environment, we provide a
self-developed backend server.

Backend Server API Documentation

Course Curriculum

Section 1. Introducing Next.js

Before diving into the full-scale learning, we will explore what the technology called Next.js is
and why it is receiving so much attention today.

Section 1. Introducing Next.js.

Section 1. Introduction to Next.js

Section 2. Page Router Core Summary

(Optional) Along with the project, we will take a quick look at the Page Router, which has been provided since the early release of Next.js.
At the same time, we will also examine the inconveniences and technical limitations associated with the Page Router.

Section 2. Introducing Page Router

Section 2. Introducing Page Router

Section 3. Getting Started with App Router

The center of attention! We will take a look at the App Router. We will explore what the App Router is, its technical differences, and its basic usage.

Section 3. Getting Started with App Router

Section 3. Getting Started with App Router

Section 4. Data Fetching

We will explore data fetching using Server Components.
At the same time, we will also look into various caching mechanisms provided by Next.js (Data Cache, Request Memoization).

Section 4. Data Fetching

Section 4. Data Fetching

Section 5. Page Caching

We will take a detailed look at Full Route Cache and Client Router Cache, which are the page caching mechanisms in the App Router version.
At the same time, we will also explore the Route Segment Options used to forcibly set a page's caching options.

Section 5. Page Caching

Section 5. Page Caching

Section 6. Streaming & Error Handling

We will explore Streaming, which helps render the parts of a page that are ready quickly.
We will look at both the method using the Loading file and the method using Suspense..

We will also look at error handling and page recovery methods using the Error file.

Section 6. Streaming and Error Handling

Section 6. Streaming and Error Handling

Section 7. Server Actions

We will take a look at Server Actions, which sparked a heated response upon their release.
We will also explore how to add or delete data using Server Actions and how to handle loading and error states.

Section 7. Server Actions

Section 7. Server Actions

Section 8. Advanced Routing Patterns (Parallel, Intercepting)

We will explore the newly provided Parallel Routes & Intercepting Routes in the App Router.
Using these, we will implement a feature that displays specific pages as modals to ensure the user's navigation is not interrupted.

Section 8. Advanced Routing Patterns

Section 8. Advanced Routing Patterns

Section 9. Optimization and Deployment

We will explore optimization methods for images, metadata, pages, regions, and more.
We will then deploy the optimized project to Vercel and perform further performance improvements.

Section 9. Optimization and Deployment

Section 9. Optimization and Deployment

The 5 Principles of the One-Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as the same food feels more delicious when it looks good,
I believe that even for the same conceptual explanation, more intuitive and attractive visual materials will be easier to understand.

Therefore, I have made constant efforts to create intuitive visual materials, including animations.

⚖ Principle 2. Kindness

I did not gloss over new terms or concepts or jump to the conclusion that you would already know them. I made every effort to ensure you wouldn't need to search on Google separately while taking the course.

⚖ Principle 3. Plausibility

To keep students engaged, I created this course with a constant focus on logical flow—ensuring that whenever new content is introduced, it connects to previous material and doesn't feel like a sudden disruption.

⚖ Principle 4. Good Vocalization and Diction

Since you have to listen to my voice for a long time, I always strive for good vocalization and diction.
To this end, I have produced the lectures so that you can understand everything even when played at 2x speed.

Take a listen! 2x speed playback link

⚖ Principle 5. Communication

We gather in a student-exclusive community to grow together by sharing knowledge and news.

Anticipated Q&A 💬

Q. Who is the target audience for this course?

This course is optimized for those with basic knowledge of React.js and TypeScript.
However, for TypeScript, I will provide supplementary explanations and supplementary learning materials throughout the course,
so you can follow along without much difficulty, except for the parts where types are written.

Q. I only want to learn App Router; do I really need to take the Page Router section?

If you are an expert in Page Router, you may skip Section 2 and start learning directly from Section 3.
However, accurate metacognition is required to ensure you have a solid understanding of the limitations and characteristics of Page Router.

Portfolio and Personal Videos

INFCON2023 - Why is TypeScript like that?

(Book) Introduction video for "React One Bite at a Time"

Recommended for
these people

Who is this course right for?

  • Students of the "One Bite" series

  • Beginners starting with Next.js for the first time

  • Those who want to learn with the latest version of Next.js

  • Those who are looking for a kind and detailed lecture

Need to know before starting?

  • React.js (Basic)

  • TypeScript (Basic)

Hello
This is winterlood

38,358

Learners

2,849

Reviews

1,651

Answers

4.9

Rating

19

Courses

Shall we take a bite-sized look at Web Front-end?!

Hello 🙇‍♂

I am someone who believes there is a way to explain anything easily and in an entertaining way, and

I am someone who wants to create the warmest developer community in the world.

 

More

Curriculum

All

66 lectures ∙ (15hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

560 reviews

5.0

560 reviews

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Reviews 15

    Average Rating 5.0

    5

    25% enrolled

    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?)

    • seungwoo님의 프로필 이미지
      seungwoo

      Reviews 7

      Average Rating 5.0

      5

      74% enrolled

      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!

      • dla14347593님의 프로필 이미지
        dla14347593

        Reviews 4

        Average Rating 4.3

        5

        92% enrolled

        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.

        • bibipapa님의 프로필 이미지
          bibipapa

          Reviews 4

          Average Rating 5.0

          5

          100% enrolled

          Don't bother digging, just watch this lecture

          • rhs199813739님의 프로필 이미지
            rhs199813739

            Reviews 9

            Average Rating 5.0

            5

            8% enrolled

            Front-end lecture === Lee Jeong-hwan

            • I agree!!

          winterlood's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!

          $37.40