강의

N
챌린지

멘토링

N
클립

커뮤니티

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

4,892 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.

HU2mxpO - Imgur

https://link.onebitefe.com/r/gxy625

로드맵안내_넥스트

Click the image to navigate to the roadmap.
> Roadmap link: https://link.onebitefe.com/r/68zgsv

Series Course Links
> React in Bite-Sized Pieces:https://inf.run/v3XAj
> TypeScript in Bite-Sized Pieces: https://inf.run/FpLm4
> Next.js in Bite-Sized Pieces: https://inf.run/v3XAj

Thanks to your tremendous support, this course has also been published as a book. Thank you sincerely 🙇‍♂

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

Next.js(15+) in Bite-Sized Pieces

15 hours of content
from Page Router to App Router

💡 What is Page Router?

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

💡 What is App Router?

Next.js 13 and later versions' latest router
Provides cutting-edge features like streaming and server actions

The App Router, newly introduced in Next.js version 13, was created to address the shortcomings of the Page Router.
Therefore, without understanding the Page Router, it is difficult to easily grasp the new mechanisms of the App Router.

Therefore, this course will quickly cover Page Router (5 hours) and then thoroughly explore App Router (10 hours). Through this, you will gain a deep understanding of what limitations existed in the traditional Page Router and how App Router overcomes these limitations.

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

Stop with static visuals ✋
Explore Next.js 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

Visual Materials Related to App Router Layout

React Server Component Related Visual Materials

Visual Materials Related to React Server Components

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.

swagger

Backend Server API Documentation

Course Structure

Section 1. Introducing Next.js

Before diving into the main learning content, let's explore
what Next.js technology is and why it's receiving so much attention today.

curi-1-1

Section 1. Introducing Next.js

curi-1-2

Section 1. Introducing Next.js

Section 2. Page Router Core Summary

(Optional) We'll quickly explore the Page Router, which 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 exist in the Page Router.

curi-2-1

Section 2. Introducing the Page Router

curi-2-2

Section 2. Introducing Page Router

Section 3. Getting Started with App Router

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

curi-3-1

Section 3. Getting Started with App Router

curi-3-2

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

curi-4-1

Section 4. Data Fetching

curi-4-2

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-side Router Cache.
At the same time, we'll also explore Route Segment Config, which allows you to forcefully configure page caching options.

curi-5-1

Section 5. Page Caching

curi-5-2

Section 5. Page Caching

Section 6. Streaming & Error Handling

We'll explore streaming, which helps render parts of a page as soon as they're ready.
We'll look at both approaches: using Loading files and using Suspense.

Additionally, we'll explore error handling and page recovery methods using the Error file.

curi-6-1

Section 6. Streaming and Error Handling

curi-6-2

Section 6. Streaming and Error Handling

Section 7. Server Actions

We'll explore Server Actions, which sparked heated reactions when they were first introduced.
We'll learn how to add or delete data using Server Actions and handle loading states and error states.

curi-7-1

Section 7. Server Actions

curi-7-2

Section 7. Server Actions

Section 8. Advanced Routing Patterns (Parallel, Intercepting)

In the App Router, we explore the newly provided Parallel Routes & Intercepting Routes.
Using these, we implement functionality to display specific pages as modals without disrupting the user's navigation.

curi-8-1

Section 8. Advanced Routing Patterns

curi-8-2

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 again.

curi-9-1

Section 9. Optimization and Deployment

curi-9-2

Section 9. Optimization and Deployment

5 Principles of the Hanip Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as the same food tastes better when it looks appealing,
I believe that even when explaining the same concept, more intuitive and attractive visual materials make it easier to understand.

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

⚖ Principle 2. Kindness

I made sure not to gloss over or assume you already know new terms or concepts when they appear. I did my best to ensure you won't need to Google anything separately while taking the course.

⚖ Principle 3. Plausibility

To maintain students' interest, I always created the lectures while considering the plausibility - whether new content that appears during the lecture is related 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 on good vocalization and diction.
To this end, 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 while growing together.

Anticipated Q&A 💬

Q. Who is this course for?

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 for the type-writing sections.

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

If you are proficient in 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 is TypeScript Like That?

(Book) Introduction Video for Bite-Sized React

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,988

Learners

2,410

Reviews

1,542

Answers

4.9

Rating

13

Courses

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

안녕하세요 🙇‍♂

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

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

 

Curriculum

All

66 lectures ∙ (15hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

488 reviews

5.0

488 reviews

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Reviews 14

    ∙

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

    • rhs199813739님의 프로필 이미지
      rhs199813739

      Reviews 9

      ∙

      Average Rating 5.0

      5

      8% enrolled

      Front-end lecture === Lee Jeong-hwan

      • dev8678

        I agree!!

    • bibipapa님의 프로필 이미지
      bibipapa

      Reviews 4

      ∙

      Average Rating 5.0

      5

      100% enrolled

      Don't bother digging, just watch this lecture

      • 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.

        • 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!

          Limited time deal ends in 7 days

          $33,880.00

          30%

          $37.40

          winterlood's other courses

          Check out other courses by the instructor!

          Bite-sized TypeScript강의 썸네일

          Bite-sized TypeScript

          winterlood

          Beyond grammar, to how it works and concepts: TypeScript is confusing even after much learning. Now, truly learn it! We'll make you a TypeScript wizard 🧙🏻‍♀️.

          초급

          초급

          TypeScript

          Bite-sized TypeScript강의 썸네일

          Bite-sized TypeScript

          winterlood

          Bite-Sized React(React.js): From Basics to Practice강의 썸네일

          Bite-Sized React(React.js): From Basics to Practice

          winterlood

          From concepts to unique projects, master JavaScript and React all at once with this course. Short learning, long application - a 17-hour All-in-one course!

          초급

          초급

          JavaScript, React, Node.js

          Bite-Sized React(React.js): From Basics to Practice강의 썸네일

          Bite-Sized React(React.js): From Basics to Practice

          winterlood

          Bite-sized Real-world Project - SNS Edition강의 썸네일

          Bite-sized Real-world Project - SNS Edition

          winterlood

          Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

          중급이상

          중급이상

          supabase, zustand, react-query

          Bite-sized Real-world Project - SNS Edition강의 썸네일

          Bite-sized Real-world Project - SNS Edition

          winterlood

          Similar courses

          Explore other courses in the same field!

          Bite-sized TypeScript강의 썸네일

          Bite-sized TypeScript

          winterlood

          Beyond grammar, to how it works and concepts: TypeScript is confusing even after much learning. Now, truly learn it! We'll make you a TypeScript wizard 🧙🏻‍♀️.

          초급

          초급

          TypeScript

          Bite-sized TypeScript강의 썸네일

          Bite-sized TypeScript

          winterlood

          Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2강의 썸네일

          Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2

          aftercamp

          Master React rendering principles and optimization to apply them in real-world situations and prepare for interviews!

          중급이상

          중급이상

          React, react-usememo, Tech Interview

          Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2강의 썸네일

          Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2

          aftercamp

          Bite-Sized React(React.js): From Basics to Practice강의 썸네일

          Bite-Sized React(React.js): From Basics to Practice

          winterlood

          From concepts to unique projects, master JavaScript and React all at once with this course. Short learning, long application - a 17-hour All-in-one course!

          초급

          초급

          JavaScript, React, Node.js

          Bite-Sized React(React.js): From Basics to Practice강의 썸네일

          Bite-Sized React(React.js): From Basics to Practice

          winterlood

          next 14.2 latest version official documentation강의 썸네일

          next 14.2 latest version official documentation

          jeong4726

          There are no special Next.js techniques that you can only learn by working in the field. I will explain based on the latest official Next documentation.

          초급

          초급

          Next.js

          next 14.2 latest version official documentation강의 썸네일

          next 14.2 latest version official documentation

          jeong4726

          Complete Real-world YouTube Clone Development with Next.js 15강의 썸네일

          Complete Real-world YouTube Clone Development with Next.js 15

          antonio

          In this 24-hour tutorial, you will learn how to build your own YouTube clone. We will cover advanced topics such as Next 15 and React 19 (including tRPC), prefetching in Server Components, utilizing Suspense in Client Components, video processing, background jobs, and AI features.

          초급

          초급

          Next.js, React, PostgreSQL

          Complete Real-world YouTube Clone Development with Next.js 15강의 썸네일

          Complete Real-world YouTube Clone Development with Next.js 15

          antonio

          Bite-sized Real-world Project - SNS Edition강의 썸네일

          Bite-sized Real-world Project - SNS Edition

          winterlood

          Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

          중급이상

          중급이상

          supabase, zustand, react-query

          Bite-sized Real-world Project - SNS Edition강의 썸네일

          Bite-sized Real-world Project - SNS Edition

          winterlood

          # [Electron #1] Building a Timer App with Electron + React (With Zustand)강의 썸네일

          # [Electron #1] Building a Timer App with Electron + React (With Zustand)

          dakgangjung123

          This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

          초급

          초급

          React, Electron, GUI

          # [Electron #1] Building a Timer App with Electron + React (With Zustand)강의 썸네일

          # [Electron #1] Building a Timer App with Electron + React (With Zustand)

          dakgangjung123

          Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)강의 썸네일

          Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

          Indie Coder

          A course to learn the latest Node.js backend REST API using fastify, a Node.js framework boasting high speed, ORM Prisma, and Typescript.

          초급

          초급

          Node.js, TypeScript, Prisma

          Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)강의 썸네일

          Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

          Indie Coder

          Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

          Hybrid App with Expo Framework to Increase Web Developer's Salary

          codecamp

          This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

          초급

          초급

          React, Next.js, expo

          Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

          Hybrid App with Expo Framework to Increase Web Developer's Salary

          codecamp

          [Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

          [Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

          lopun

          Supabase: Giving Wings to Full-stack Development! Through 3 clone projects, you will quickly learn how to build practical-level full-stack applications using Next.js 14 and Supabase.

          초급

          초급

          Next.js, supabase, TailwindCSS

          [Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

          [Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

          lopun

          If you guys want to do backend, do it as much as you want. I'm fine with it because I have Firebase.강의 썸네일

          If you guys want to do backend, do it as much as you want. I'm fine with it because I have Firebase.

          jejucoding

          Are you a front-end developer and have you ever felt disappointed because you couldn't implement a login function? Have you ever wanted to implement a function that saves and loads data using a DB, but found it burdensome to study queries? With Firebase, it's easy! Let's implement essential functions for web development, such as user authentication, data storage, and hosting, with the power of React and Firebase! (This lecture was recorded in August 22 and reflects the major update of Firebase.)

          초급

          초급

          Firebase, React

          If you guys want to do backend, do it as much as you want. I'm fine with it because I have Firebase.강의 썸네일

          If you guys want to do backend, do it as much as you want. I'm fine with it because I have Firebase.

          jejucoding

          Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

          Applying TypeScript to Node.js (feat. NodeBird)

          zerocho

          Let's apply TypeScript to Node.js, add typings to existing npm packages, or create your own TypeScript library.

          중급이상

          중급이상

          Web Application, TypeScript, Node.js

          Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

          Applying TypeScript to Node.js (feat. NodeBird)

          zerocho

          Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]강의 썸네일

          Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

          John Ahn

          In this course, you will learn how to create a chat application using React and Firebase.

          초급

          초급

          React, Firebase, Web Application

          Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]강의 썸네일

          Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

          John Ahn

          [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)강의 썸네일

          [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

          codecamp

          Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

          중급이상

          중급이상

          React, Next.js, cursor

          [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)강의 썸네일

          [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

          codecamp

          # [CS Technical Interview 5] Data Structures That Click

          yiyj10305235

          A course that helps you understand core data structure concepts and practice explaining them verbally for interviews

          입문

          입문

          Interview, computer-science, data-structure

          # [CS Technical Interview 5] Data Structures That Click

          yiyj10305235

          [Renewal] TypeScript All-in-One: Part 1. Basic Grammar강의 썸네일

          [Renewal] TypeScript All-in-One: Part 1. Basic Grammar

          zerocho

          Learn the basic syntax of TypeScript, how to analyze types written by others, and how to write your own types.

          초급

          초급

          TypeScript

          [Renewal] TypeScript All-in-One: Part 1. Basic Grammar강의 썸네일

          [Renewal] TypeScript All-in-One: Part 1. Basic Grammar

          zerocho

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)강의 썸네일

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)

          ludgi

          A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

          중급이상

          중급이상

          Next.js, React, GraphQL

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)강의 썸네일

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)

          ludgi

          Introductory course from TypeScript to ionic6 (Angular-based)강의 썸네일

          Introductory course from TypeScript to ionic6 (Angular-based)

          nodeep777

          I recommend this to those who want to learn how to easily create and distribute Android apps, Windows apps, and iOS apps. We will teach you the basics of TypeScript rather than JavaScript and Angular!

          입문

          입문

          TypeScript, IONIC, Hybrid App

          Introductory course from TypeScript to ionic6 (Angular-based)강의 썸네일

          Introductory course from TypeScript to ionic6 (Angular-based)

          nodeep777

          TypeScript A-Z: Learn by Following강의 썸네일

          TypeScript A-Z: Learn by Following

          John Ahn

          In this course, you will learn about TypeScript.

          초급

          초급

          TypeScript, JavaScript

          TypeScript A-Z: Learn by Following강의 썸네일

          TypeScript A-Z: Learn by Following

          John Ahn

          Creating Web Services with Vibe Coding With Claude Code강의 썸네일

          Creating Web Services with Vibe Coding With Claude Code

          ref63184917

          A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

          입문

          입문

          HTML/CSS, JavaScript, Next.js

          Creating Web Services with Vibe Coding With Claude Code강의 썸네일

          Creating Web Services with Vibe Coding With Claude Code

          ref63184917