강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Bite-sized Next.js(v15)

The 3rd work in the One Bite series! The world's most kind and detailed Next.js (15+) course. We'll explore not only App Router but also Page Router through projects.

(5.0) 473 reviews

4,794 learners

  • winterlood
이론 실습 모두
next.js13
Next.js
React
TypeScript
kakao-tech

Reviews from Early Learners

What you will gain after the course

  • We'll explore the latest Next.js (v15 and above) concepts.

  • We'll explore most concepts from Page Router to App Router.

  • We'll explore various concepts including server components, page routing, layout configuration, data fetching, streaming, and deployment.

로드맵안내_넥스트

You can navigate to the roadmap by clicking on the image.
> Roadmap link: https://link.onebitefe.com/r/68zgsv

Series Lecture Links
> Bite-sized React:https://inf.run/v3XAj
>
Bite-sized TypeScript: https://inf.run/FpLm4
>
Bite-sized Next.js: https://inf.run/v3XAj

Thanks to all of your love and support, this course has also been published as a book. I sincerely thank you 🙇‍♂

  • Next.js in Bite-Sized Pieces | Official Trailer

Bite-sized Next.js(15+)

15 hours of content covering
from Page Router to App Router

💡 What is Page Router?

Router used until Next.js version 13
Provides intuitive and stable functionality

💡 What is App Router?

Next.js 13 latest router released after version 13
Provides latest features such as streaming, server actions, etc.

The App Router, which newly appeared starting from Next.js version 13, was introduced to address the shortcomings of the Page Router.
Therefore, without understanding the Page Router, it's difficult to easily comprehend the new mechanisms of the App Router.

Therefore, this course will proceed by quickly reviewing Page Router (5 hours) and then thoroughly examining App Router (10 hours). Through this approach, you will gain a deep understanding of what limitations the existing Page Router had and how App Router overcomes these limitations.

⚠ However, please don't misunderstand - this course focuses on App Router.

Stop with static visual materials
Next.js explored with intuitive animations

Next.js has many features with complex mechanisms.
Therefore, static visual materials alone are not sufficient to explain them adequately.
Accordingly, this course is accompanied by intuitive animations as shown below

App Router Layout Related Visual Materials

React Server Component Related Visual Materials

React Server Component Related Visual Materials

Visual materials related to Client Router Cache

As close to real-world scenarios as possible 🚧
Self-developed backend server provided for hands-on practice

To explore Next.js's various caching features in a more practical environment,
we provide you with a custom-built backend server.

Backend Server API Documentation

Course Structure

Section 1. Introducing Next.js

Before diving into full-scale learning, let's explore what Next.js technology is
and why it's receiving so much attention today.

Section 1. Introducing Next.js.

Section 1. Introducing Next.js.

Section 2. Page Router Core Summary

(Optional Course) We'll quickly explore the Page Router that has been provided since the early release of Next.js along with the project.
At the same time, we'll also examine what inconveniences and technical limitations the Page Router has.

Section 2. Introducing Page Router

Section 2. Introducing Page Router

Section 3. Getting Started with App Router

The center of attention! We explore App Router. We'll learn what App Router is, what technical differences it has, and also look at basic usage together.

Section 3. Getting Started with App Router

Section 3. Getting Started with App Router

Section 4. Data Fetching

We'll explore data fetching using server components.
At the same time, we'll also examine various caching mechanisms provided by Next (data cache, request memoization).

Section 4. Data Fetching

Section 4. Data Fetching

Section 5. Page Caching

We'll take a detailed look at the App Router version's page caching: Full Route Cache and Client Router Cache.
At the same time, we'll also examine Route Segment Options that forcibly set page caching options.

Section 5. Page Caching

Section 5. Page Caching

Section 6. Streaming & Error Handling

We'll explore streaming, which helps render parts of a page immediately as they become ready.
We'll examine both approaches: using Loading files and using Suspense.

Additionally, we will also examine error handling and page recovery methods using Error files.

Section 6. Streaming and Error Handling

Section 6. Streaming and Error Handling

Section 7. Server Actions

We'll explore Server Actions, which generated a hot response when they were first released.
We'll look at how to use Server Actions to add or delete data, and even how to handle loading states and error states.

Section 7. Server Actions

Section 7. Server Actions

Section 8. Advanced Routing Patterns (Parallel, Intercepting)

We'll explore the newly provided parallel routes & intercepting routes in App Router.
Using these, we'll implement functionality to display specific pages as modals without disrupting user navigation.

Section 8. Advanced Routing Patterns

Section 8. Advanced Routing Patterns

Section 9. Optimization and Deployment

We'll explore optimization methods for images, metadata, pages, regions, and more.
We'll deploy the optimized project to Vercel and work on improving performance once more.

Section 9. Optimization and Deployment

Section 9. Optimization and Deployment

5 Principles of the One Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just like the same food tastes better when it looks good,
I think the same concept explanation will be easier to understand with more intuitive and attractive visual materials.

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

⚖ Principle 2. Kindness

I didn't roughly explain and skip over new terms or concepts when they appeared, nor did I assume you would already know them. I made every effort to ensure you wouldn't need to do separate googling while taking the course.

⚖ Principle 3. Plausibility

To maintain students' interest, I always created lectures while considering plausibility - whether new content that appears during the lecture is always connected to previous content, and whether you might feel like the flow is suddenly interrupted.

⚖ Principle 4. Good Vocalization and Diction

Since you'll be listening to my voice for a long time, I'm always working hard to maintain good vocalization and diction.
To achieve this, I've created the lectures so that you can understand everything even when played at 2x speed.

Give it a listen! 2x Speed Playback Link

⚖ Principle 5. Communication

Students gather in the exclusive community to share knowledge and news with each other and grow together.

Expected Questions Q&A 💬

Q. Who is the target audience for this course?

This course is optimized for those who have 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 for the parts involving writing types.

Q. I only want to learn App Router, but do I really need to listen to the Page Router sections as well?

If you are proficient with Page Router, you can skip section 2 and start learning directly from section 3.
However, you need accurate metacognition about whether you truly understand the limitations and characteristics of Page Router.

Portfolio and Personal Videos

INFCON2023 - Why Does TypeScript Do That?

(Book) Bite-Sized React Introduction Video

Recommended for
these people

Who is this course right for?

  • Students of the One Bite series

  • Beginners who are just starting with Next.js

  • Those who want to learn with the latest Next.js (15+) version

  • Those looking for kind and detailed lectures

Need to know before starting?

  • React.js (Basics)

  • TypeScript (Basics)

Hello
This is

35,542

Learners

2,290

Reviews

1,514

Answers

4.9

Rating

13

Courses

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

Curriculum

All

66 lectures ∙ (15hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

473 reviews

5.0

473 reviews

  • 주니어에요님의 프로필 이미지
    주니어에요

    Reviews 14

    Average Rating 5.0

    5

    25% enrolled

    Next.js 강의는? 이정환. React.js 강의도? 이정환. TypeScript 강의도? 이정환. 공식입니다. 암기하십쇼. 시각적 자료와 딕션으로 머리에 때려박아주십니다. 이래도 결제 안 해? 독하다 독해. 아래 질문에 대답하기 어렵거나 헷갈리는 개념이 있다면 결제 하십셔. 도움 됩니다. 1. React와 Next.js를 사용했을 때 각 차이점을 TTV, TTI 관점에서 설명해 주세요. 2. Next.js 사전 렌더링에 대해서 설명해 주세요. 3. Next.js 프리페칭에 대해서 설명해 주세요. 4. Next.js 하이드레이션은 어느 시점에 이루어지나요? 5. Next.js 데이터 페칭은 어느 시점에 이루어지나요? 저는 하나도 몰랐는데 이제 대답할 수 있습니다. 시각 자료로 친절하게 떠먹여 주십니다. 잊을만 하면 복습 차원으로 가져와서 머리 속에 때려박아 주십니다. 원래 이렇게까지 후기 안 남기려고 했는데.. 강의질 높이려고 노력하신 티가 팍팍나서 후기를 안 남길 수 없었습니다. 진짜 무서운 점은 아직 강의 초반부인데 이 정도 수확을 얻을 수 있다는 거네요. (이제 고민 그만하고 결제하러 갑시다. 이래도 안 하시는 분 없겠지?)

    • 유호준님의 프로필 이미지
      유호준

      Reviews 9

      Average Rating 5.0

      5

      8% enrolled

      프론트엔드 강의 === 이정환

      • dev

        공감합니다!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      삽질하지 말고 그냥 이 강의 보세요

      • dla1434님의 프로필 이미지
        dla1434

        Reviews 4

        Average Rating 4.3

        5

        92% enrolled

        원래 수강평은 잘 안 남기는데...이번 강의는 만족도가 너무 좋아서 남겨요 일단 제가 몇 개의 next 강의를 봤지만 강의에서 설명하기 어려운 부분은 이렇게 쓰면 되요라고 사용법만 알려주고 넘어가는 경우가 대부분이여서 항상 왜 써야 되지?뭐가 다른거지 라는 의문점이 들었는데 공식문서를 찾아봐도 모호한 부분이 많아서 이해가 안 되는 부분이 있었는데 이 강의를 보고 대부분 이해가 되었습니다 일단 설명과 자료도 이해하기 쉽게 되어 있고 이론을 설명한 뒤 다시 한번 실습으로 직접 보여주셔서 이번 강의는 제가 본 정환님 강의들 중에서도 최고라고 생각되는 강의였습니다. 기존 강의도 좋았지만 많은 고민과 피드백을 반영하신 결과라고 생각됩니다. 다음 강의도 너무 기대가 됩니다~~ 다음에는 next의 실전편 같은 강의도 제작되면 좋을 거 같습니다.

        • itjustbong님의 프로필 이미지
          itjustbong

          Reviews 6

          Average Rating 5.0

          5

          74% enrolled

          강의 만족도가 높아서 수강평을 남깁니다! 프론트엔드 개발자이지만, 저는 Page Router 스택에 오랫동안 머물러 있었습니다. App Router에 도전을 안해본 것은 아니지만, 기존의 익숙함 때문인지 자꾸 Page Router를 사용하게 되더라구요... 그치만 어쩌다가 이 강의라도 들으면서 최신 트렌드?를 따라가보자는 생각이었는데, 생각보다 퀄리티가 굉장히 높았고, 제가 자꾸 Page Router로 돌아가는 이유 중에 하나가 App Router를 제대로 이해하지 못하고 있었던 부분도 컸던 것 같습니다. 이 강의를 들으면서 App Router가 어떻게 작동하는 지 이해할 수 있었고, 작은 프로젝트를 진행하면서 App Router에 대한 자신감?도 얻을 수 있었습니다. 이후 강의로 바라는 것이 있다면, App Router로 설정을 진행하면 디자인 시스템이나, 기타 여러 라이브러리? 들이 제대로 작동하지 않아 설정에 어려움을 겪는 경우도 있는데, 이런 설정들을 모두 포함한 실전편(혹은 고급편)도 있으면 좋을 것 같습니다! 감사합니다!

          $37.40

          winterlood's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!