강의

멘토링

커뮤니티

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) 482 reviews

4,832 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,707

Learners

2,360

Reviews

1,528

Answers

4.9

Rating

13

Courses

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

안녕하세요 🙇‍♂

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

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

 

Curriculum

All

66 lectures ∙ (15hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

482 reviews

5.0

482 reviews

  • justfix0109464님의 프로필 이미지
    justfix0109464

    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データフェッチはどの時点で行われますか? 私は知りませんでしたが、今答えることができます。 ビジュアル素材で親切に惜しみません。 忘れてしまうと復習次元に持ってきて頭の中に殴ってくれます。 もともとこれまで後期に残そうとはしませんでした。 本当の怖い点はまだ講義の序盤部なのにこの程度収穫が得られるということですね。 (もう悩んでやめて決済に行きましょう。これでもしない方はいないでしょ?)

    • rhs199813739님의 프로필 이미지
      rhs199813739

      Reviews 9

      Average Rating 5.0

      5

      8% enrolled

      フロントエンド講義===イ・ジョンファン

      • dev8678

        同感です!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      シャベルしないでこの講義を見てください。

      • dla14347593님의 프로필 이미지
        dla14347593

        Reviews 4

        Average Rating 4.3

        5

        92% enrolled

        もともと受講評はうまくいかないのですが…今回の講義は満足度が良すぎて残ります。 一度私はいくつかの次の講義を見ましたが、講義で説明するのが難しい部分はこう書けばいいのですが、使い方を教えてくれます。できない部分がありました。 この講義を見て大部分が理解できました 一度説明や資料もわかりやすくなっていて 理論を説明した後、もう一度実習で直接見せてください。 今回の講義は、私が見たチョンファンの講義の中でも最高だと思います。 講義でした。 既存の講義も良かったが、多くの悩みやフィードバックを反映した結果だと と思われます。 次の講義もとても楽しみです~~ 次はnextの実戦編のような講義も制作すればいいと思います。

        • seungwoo님의 프로필 이미지
          seungwoo

          Reviews 6

          Average Rating 5.0

          5

          74% enrolled

          授業の満足度が高かったので、感想を投稿します! 私はフロントエンド開発者ですが、長い間 Page Router スタックに留まっていました。 App Router に挑戦しなかったわけではありませんが、既存の慣れからか、ついつい Page Router を使用していました... しかし、偶然この授業を聞いて、最新のトレンドに追いつこうという考えが浮かんだのですが、予想以上に品質が高く、私がついつい Page Router に戻ってしまう理由の 1 つは、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!