Mastering Next.js 16+ with TypeScript: From Basics to Modern Architecture

I'm curious

What will I learn?

Next.js 16 is a React-based full-stack framework that provides all the features needed to build modern web services, including
Server Components (RSC), App Router, data caching and rendering strategies, and SEO and performance optimization.

However, Next.js versions are evolving rapidly,
and it is not easy to judge “what should actually be used in practice” or
“when to use this on the server versus the client” based on the official documentation alone..

In this course,
👉 we will study only the essential concepts you must know in Next.js 16.
Instead of being theory-oriented, we focus on patterns and standards used directly in real-world projects.

We will boldly exclude complex settings and options with low practical utility,

• Understanding the App Router-based routing structure

• Clear separation of roles between Server Components and Client Components

• Data fetching and caching strategies (cache, revalidate, no-store)

• Mastering "Cache Components," one of the latest caching systems

• Establishing criteria for Static Rendering (SSG) and Dynamic Rendering (SSR)

• The precise meaning of Loading / Error / Not Found boundaries

• Link, Prefetch, and Router Cache operating principles

• Server Actions and real-world usage patterns

• SEO and metadata design methods

It is structured around the core topics most frequently encountered in Next.js 16 practice.

Through this,
even beginners can clearly understand Next.js's rendering and data flows,
and grow into developers who can explain
"why this code runs on the server" and "why this page is being cached."

This is a lecture that doesn't just let you say "I've used Next.js," but helps you establish
the criteria to understand and choose Next.js. 🚀

It's okay even for complete beginners,

I will teach you everything step-by-step, starting from the basics.

Next.js 16 is based on React, but
when you first encounter it,
it can feel difficult due to unfamiliar concepts such as Server Components, routing structure, rendering methods, and caching concepts.

"Why is this code running on the server?"
"When should I use Client Components?"
It's perfectly natural to be confused if it's your first time.
Don't worry!

In this course,
to ensure that even those new to Next.js can understand,
I explain everything from the very basics, step by step, following the flow.

• how pages are rendered

• how the roles are divided between the server and the client

• When and where to fetch the data

I will explain it so that you can visualize it in your mind like a picture.

What makes Sucoding lectures
special
bài giảng của Sucoding

Core curriculum
optimized for beginners

Section 01 - Getting Ready

In this section, we will go through the basic preparations for taking the course before diving into the actual practice.
We will cover how to download the example code used throughout the course, guidance on the development environment to increase practice efficiency, and how to register custom snippets to reduce repetitive tasks.

Section 02 - Getting Started

In this section, we will examine the concepts of Next.js step-by-step from the beginning and cover the process of actually starting a project.
After understanding what kind of framework Next.js is, we will compare the differences between the manual installation method and the CRA-based installation method and summarize their respective characteristics. Then, we will examine the basic folder structure and file roles of the created project and organize the structure once more before proceeding with the practice.

Section 03 - Server Components and Client Components

In this section, we will dive into the core concepts of Next.js: Server Components and Client Components.
We will understand the respective roles of these two components and examine step-by-step how they are created and the criteria for their placement.

We will also explain how to import Server Components within Client Components and how children work within the layout structure.

Finally, we will address common misconceptions about Client Components and hydration errors that many developers find confusing,
and gain hands-on experience in designing a real project by dividing Server and Client Components through a To-Do list app practice.

Section 04 - App Router

In this section, we will systematically organize the operating principles and routing structure of the Next.js App Router.
After understanding how the URL structure maps to folders, we will examine core routing methods such as basic routes, nested routes, and dynamic routes in order.

Additionally, you will learn how to handle query strings and design folder structures using private folders and route groups,
and clearly define the differences and usage criteria for route transition methods using Link and useRouter..

Finally, through a mission, you will design and implement routes yourself, completing the entire flow of the App Router through hands-on practice.

Section 05 - Special Routing Files

In this section, we summarize the roles and operating methods of the key routing special files used in the Next.js App Router
.

We will look at how to handle error situations through not-found and global-not-found,
and understand the criteria for layout reuse and initialization by comparing the differences between layout.tsx and template.tsx.tiêu chuẩn tái sử dụng và khởi tạo layout.

In addition, we will summarize how to design loading states and error boundaries through loading.tsx, error.tsx, and global-error.tsx, and gain practical experience in using routing-specific files in real projects by separating and applying layouts through missions.

Section 06 - Setting Up Metadata

In this section, we will take a step-by-step look at how to set up metadata in the Next.js App Router.
First, you will learn the basic method of setting metadata using the metadata object, and understand how metadata is merged and inherited between pages through the title, absolute, and default options.

Afterwards, we will look into the method of dynamically generating metadata based on data using the generateMetadata function,
and summarize the metadata processing flow and the latest changes in the React 19 environment.

Through this, you will establish practical metadata design standards that consider both SEO and user experience.

Section 07 - Data Fetching

This section focuses on how to fetch data in the Next.js App Router environment.
First, we will understand how the fetch API works within Server Components and organize loading states and error handling based on Server Components.

Afterward, we will compare the data fetching method using the use hook with the method of fetching data in client components, examining the roles and limitations of each approach.

In addition, we will consider data fetching strategies together to determine the criteria for choosing between server-side and client-side fetching in real-world projects.

Finally, through a mission, you will directly implement data fetching logic and wrap up by practicing a complete fetching flow that includes loading and error handling.

Section 08 - Rendering Strategies

In this section, we will review CSR, SSR, SSG, and ISR—the representative rendering strategies for web applications—from the perspective of the Next.js App Router.

After understanding when each rendering method is executed and what output it produces,
we will examine step-by-step how React Server Components (RSC) combine with existing rendering strategies.

In addition, we will cover practical methods to check whether a page is rendered statically or dynamically in a real project, and establish criteria for accurately determining rendering strategies by examining situations easily mistaken for CSR and common mistakes.

Finally, we will verify ISR rendering firsthand and consider how to strike a balance between performance and data freshness.

Section 09 - Cache

In this section, we will systematically organize Next.js caching strategies.

First, we will conceptually understand the four caching layers provided by Next.js and examine when caching occurs and when it is invalidated, focusing on the Data Cache.

Afterward, you will implement on-demand invalidation by utilizing revalidatePath and revalidateTag alongside Server Actions. Beyond simply using the APIs, you will establish criteria for determining which invalidation strategy to choose in various situations.

Additionally, you will compare the differences between Request Memoization, Full Route Cache, and Router Cache to clearly understand where and to what extent each cache operates.

Finally, through a mission, you will apply caching strategies to a post list and a to-do app, gaining hands-on experience to understand how caching actually works in practice.

Section 10 - Route Handlers

In this section, we will cover how to implement server logic in the App Router environment.

After understanding the basic structure of Route Handlers, we will systematically organize how to handle query strings, dynamic segments, and body data. Next, we will practice reading and setting headers and cookies to see how authentication and user identification are processed at the server level.

In addition, we will cover caching strategies in Route Handlers, learning how to design practical server processing flows beyond simple API implementation.

Finally, through the team invitation UI and Excel download mission, you will complete the workflow of collaboration between the server and the client.

Section 11 – Images and Fonts

In this section, we cover Next.js optimization strategies.

First, we will understand the internal working principles of the next/image component and examine how 1x/2x ratios and srcset are generated. Then, we will practice how to efficiently provide images in a responsive environment using the sizes attribute.

We will also cover how to apply web and local fonts using next/font, and examine how font loading strategies relate to Layout Shift. Finally, we will complete the process by integrating with Tailwind to apply optimization strategies in a real-world project.

Section 12 – Global Client State Management and Theme Changes

In this section, we will comparatively analyze global state management strategies.

First, we will understand the limitations of the props drilling pattern and summarize basic global state management methods using the Context API. Next, we will compare Redux Toolkit and Zustand patterns, outlining their respective pros and cons and when to use each.

It also covers implementation methods for Tailwind-based dark/light modes and theme strategies using next-themes. Finally, through a calculator mission, you will implement state management and theme switching logic in practice, gaining hands-on experience with the flow of global state design.

Section 13 – Building a Movie Site

In this section, we will integrally apply what we have learned so far through a hands-on project.

You will experience actual service architecture by implementing a main page, detail pages, and search functionality using the TMDB API. In this process, you will apply image optimization and data fetch caching strategies while also considering security handling methods.

Additionally, we will introduce TanStack Query to compare and analyze client-side fetching strategies, gaining a clear understanding of the differences from server-side fetching. Finally, we will proceed with deployment and examine how rendering strategies change after the site is live.

Section 14 – Advanced Routing Patterns

In this section, we cover advanced routing techniques in Next.js.

Understand the concepts of Parallel Routes and Intercepting Routes, and apply them to a real project to implement a modal-based structure.

Rather than simply implementing functions, we approach this from a design perspective to see how route structures connect to the user experience.

Additionally, we will summarize how the router cache operates within this structure and understand the relationship between advanced routing and caching strategies.

Finally, we will complete the practical application by expanding the movie site.

Section 15 – Cache Components

In this section, we will focus on Cache Components, a core feature of Next.js 16.

Understand the principles of use cache-based caching and analyze the scope of influence of cache components. và phân tích phạm vi ảnh hưởng của các thành phần bộ nhớ đệm (cache components).

Additionally, we will examine cases where caching is impossible and the impact of non-deterministic operations on the cache.

Next, we will practice how to control cache lifetime using cacheLife and design a strategy for mixing static and dynamic content.

Through this section, we will establish the criteria for applying the latest caching models to real-world practice.

Section 16 – Final Project

In the final section, we will complete the practical architecture.

Connect MongoDB and inspect the API structure through Swagger.

Next, we will apply light/dark modes and implement Kakao Login using parallel routes and intercepting route structures.

Beyond a simple login feature, you will design token strategies and authentication flows to complete a production-level architecture.

This section is the process of integrating all the rendering strategies, caching, routing, and server logic learned so far.

Frequently Asked Questions

Notes before taking the course