Next.js (v15) to be eaten in bite-sized pieces

Next.js in bite-sized chunks (15+)

In 15 hours
From Page Router to App Router

App Router , a new feature introduced in Next.js version 13, was introduced to complement the shortcomings of Page Router .
Therefore, if you do not understand Page Router , it is difficult to easily understand the new mechanism of App Router .

Therefore, this lecture will proceed in the order of a quick look at Page Router (5 hours) and then a thorough look at App Router (10 hours) . Through this, you will gain a deep understanding of what limitations the existing Page Router had and how App Router overcomes these limitations.

⚠ But don’t get me wrong, this course focuses on App Router.

No more static visuals ✋
Next.js in action with intuitive animations

Next.js has many features with complex mechanisms.
Therefore, it is difficult to explain sufficiently with only static visual data.
This lecture is accompanied by the following intuitive animations:

As close to the real situation as possible 🚧
Provides self-built backend server for practice

To examine the various caching features of Next.js in a more practical environment,
We provide our own custom backend server.

Lecture Structure

Section 1. Introducing Next.js

Before we start learning in earnest, what is Next.js technology?
Let's take a look at why it's getting so much attention today.

Section 2. Page Router Core Summary

(Optional) Quick overview of the Page Router that has been available since the early days of Next.js release, along with a project.
At the same time, we will also look at some of the inconveniences and technical limitations of Page Router.

Section 3. Getting Started with App Router

The center of attention! Let's take a look at App Router. We'll learn what App Router is, what technical differences it has, and how to use it in basic ways.

Section 4. Data Fetching

Let's look at data fetching using server components.
At the same time, we will look at the various caching methods (data cache, request memoization) provided by Next.

Section 5. Page Caching

Let's take a closer look at the full route cache and the client route cache, which are page caching versions of App Router.
We will also look at the route segment option that forces caching options for a page at the same time.

Section 6. Streaming & Error Handling

We'll look at streaming, which helps you render parts of a page that are ready quickly.
We will look at both methods, one using a Loading file and one using Suspense .

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

Section 7. Server Actions

Let's take a look at the server action that caused a heated reaction when it was released.
We'll look at how to use server actions to add or delete data, and handle loading and error states.

Section 8. Advanced Routing Patterns (Parallel, Intercepting)

Let's take a look at the new parallel routes and intercepting routes available in App Router.
This allows us to implement a feature that displays certain pages in a modal manner so as not to interrupt the user's navigation.

Section 9. Optimization and Distribution

Explore how to optimize images, metadata, pages, regions, and more.
We deploy the optimized project to Vercel and work on improving performance once more.

Five Principles of the One Bite Series

Expected Questions Q&A 💬

Portfolio and personal videos