React v19 (version 19) 및 Next.js v15 (version 15) 공부하기 (튜토리얼|Tutorial) :: App Router, RSC (React Server Component)

# React v19 (version 19) 및 Next.js v15 (version 15) 공부하기 (튜토리얼|Tutorial) :: App Router, RSC (React Server Component) Next.js 가 v15 가 되면서 많은 것들이 바뀌었는데, 프론트엔드 개발자 (FE: Front-End developer) 로서는 필수가 될것도 같으니 공부해 놓는것이 좋아 보임. 이제 백엔드 (BE: Back-End) 도 Next.js 로 다루게 될듯한 느낌임. App Router, RSC (React Server Component) 의 힘~! ## PH

• 2025-07-01 : First posting.

## TOC ## Youtube - Next.js 15 Full Tutorial - Beginner to Advanced, by Codevolution 유튜브에 좋은 강의 가 있어서 공유함. 공부하면서 정리했던 제 코드들 도 참고 하시길... 동영상 게시자의 github code 들도 있는데, 좀 파편화 되어있고, 완성이 안되어 있는 코드들도 좀 있음. 제 Recoeve.net 페이지 https://recoeve.net/user/kipid?cat=[IT/Programming]--HTML, Javascript, CSS--Next.js&PRL=0.80&PRR=1.00#headPlay 에서 시청하시면 유튜브 광고 없이 보실 수 있습니다. 각 챕터별로 시간 점프도 가능하게 해놨어요.

// #time
00:00 Introduction to Next.js
04:09 Hello World
07:15 Project Structure
11:27 Before We Start
13:13 Routing
18:57 Nested Routes
21:50 Dynamic Routes
27:49 Nested Dynamic Routes
31:23 Catch-all Segments
37:32 Not Found Page
42:45 File Colocation
45:33 Private Folders
48:16 Route Groups
52:09 Layouts
56:33 Nested Layouts
01:00:25 Multiple Root Layouts
01:03:45 Routing Metadata
01:11:46 title Metadata
01:14:53 Linking Component Navigation
01:19:50 Active Links
01:23:41 params and searchParams
01:29:16 Navigating Programmatically
01:33:11 Templates
01:36:56 Loading UI
01:40:06 Error Handling
01:45:08 Recovering from Errors
01:47:55 Handling Errors in Nested Routes
01:49:59 Handling Errors in Layouts
01:52:06 Handling Global Errors
01:57:31 Parallel Routes
02:05:59 Unmatched Routes
02:12:15 Conditional Routes
02:14:52 Intercepting Routes
02:28:09 Parallel Intercepting Routes
02:33:44 Route Handlers
02:39:27 GET Request
02:42:17 POST Request
02:45:45 Dynamic Route Handlers
02:49:14 PATCH Request
02:52:18 DELETE Request
02:55:04 URL Query Parameters
02:57:58 Headers in Route Handlers
03:03:35 Cookies in Route Handlers
03:06:58 Redirects in Route Handlers
03:08:25 Caching in Route Handlers
03:12:44 Middleware
03:18:55 Rendering
03:20:15 Client-side Rendering (CSR)
03:23:28 Server-side Rendering (SSR)
03:28:17 Suspense SSR
03:34:44 React Server Components
03:41:14 Server and Client Components
03:47:27 Rendering Lifecycle in RSCs
03:50:57 Static Rendering
04:02:04 Dynamic Rendering
04:06:46 generateStaticParams
04:12:05 dynamicParams
04:15:39 Streaming
04:18:26 Server and Client Composition Patterns
04:19:28 Server-only Code
04:24:31 Third Party Packages
04:29:18 Context Providers
04:34:21 Client-only Code
04:38:31 Client Component Placement
04:43:20 Interleaving Server and Client Components
04:51:26 Data Fetching
04:52:55 Fetching Data in Client Components
04:57:02 Fetching Data with Server Components
05:01:16 Loading and Error States
05:04:09 Sequential Data Fetching
05:09:30 Parallel Data Fetching
05:15:20 Fetching From a Database
05:21:47 Data Mutations
05:24:54 Forms with Server Actions
05:30:43 useFormStatus Hook
05:34:14 useActionState Hook
05:41:04 Separating Server Actions
05:44:32 useFormStatus vs useActionState
05:46:03 Update Server Action
05:54:51 Delete Server Action
05:58:17 Optimistic Updates with useOptimistic Hook
06:04:30 Form Component
06:12:06 Authentication
06:14:26 Clerk Setup
06:17:19 Sign in and Sign out
06:20:18 Profile Settings
06:23:22 Conditional UI Rendering
06:24:52 Protecting Routes
06:28:45 Read Session and User Data
06:33:43 Role Based Access Control
06:44:49 Customizing Clerk Components
06:51:23 Deploying Next.js Apps

## RRA

1. Youtube - Next.js 15 Full Tutorial - Beginner to Advanced, by Codevolution
2. https://github.com/kipid/react/tree/main/app-route-demo
3. https://github.com/gopinav/Next.js-15-Tutorials