Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

난이도 중급·수강생 100명+

함께 소스코드를 까보며 기술면접부터 실무 설계까지, AI 시대에 필요한 깊은 이해와 자신만의 관점을 갖출 수 있도록 도와드릴게요. Next.js를 단순히 "써본" 개발자에서, 왜 그렇게 쓰는지 "이해하는" 전문가로 성장하세요.

강사: Boaz

★ 4.9 (8+)

수강 기간: 570분

최대 6%

월 29,000원

(6개월 할부시)

권장 소비자 가격

187,000원

할인 금액

-13,000원

최종 결제 금액

174,000원

(필수) 환불정책에 동의합니다.

함께 배우는 내용

기술면접에서 자주 나오는 Next.js의 동작 원리

내부 코드 분석을 통한 깊은 이해

실무에 바로 적용 가능한 설계 원칙

바람직한 아키텍처 구축 방법

AI 시대에도 유효한 Next.js의 기술 철학과 본질

변화하는 기술 환경 속 핵심 가치 이해

프레임워크를 더 잘 선택하고 활용할 수 있는, 자신만의 기준과 관점

기술 선택의 명확한 기준 제시

💡 강의를 구매하신 분들에 한하여 <커리어 1:1 코칭 1회권>을 선물 해드려요.

구매 영수증을 hkc7180@gmail.com 으로 보내주시면 코칭 예약 링크를 드릴게요.

이런 분들에게 추천해요

👨‍💻 Next.js를 써봤지만, 제대로 이해하고 싶은 분

익숙하게 쓰고 있지만, 내부 동작 원리가 궁금한 분들에게 적합합니다.

🎙 기술 면접에서 항상 흐릿하게 설명하게 되는 분

개념은 아는데, 질문을 받으면 정리된 답변을 하기 힘든 분들을 위한 강의입니다.

🧭 AI 시대, 기술 선택 기준이 불안한 실무자

트렌드에 휩쓸리지 않고 기술의 본질을 꿰뚫고 싶은 분들에게 도움이 됩니다.

수강 후에는

Next.js의 핵심 개념(라우팅, 렌더링, 에러 처리 등)을 단순히 사용하는 수준을 넘어서, 왜 그렇게 설계되었는지 설명할 수 있게 됩니다.
기술 면접에서 자주 나오는 질문들에 대해, 자신의 언어로 명확하고 논리적으로 대답할 수 있는 실력을 갖추게 됩니다.
공식 문서나 튜토리얼만으로는 얻을 수 없었던 프레임워크의 철학과 동작 원리에 기반한 실무 설계 기준을 만들 수 있습니다.
'남들이 만든 구조를 따라 쓰는 개발자'에서, '자신의 기준으로 구조를 판단하고 설명할 수 있는 개발자'로 성장하게 됩니다.
변화하는 프론트엔드 기술 흐름 속에서도, 기술을 보는 시야와 선택 기준을 스스로 세울 수 있는 자신감을 얻게 됩니다.

이 강의의 핵심 장점

소스코드를 까보며, 동작 원리를 분석해요.

Next.js의 내부 소스코드를 분석하며 동작 원리를 설명합니다. 이를 통해 사용하던 기능이 내부적으로 어떻게 동작하는지 파악합니다.

공식 문서를 넘어, 설계 철학을 다뤄요.

공식 문서에 나오는 기능을 순서대로 따라가면서, 그 기능이 왜 등장했고 어떤 문제를 해결하기 위한 선택이었는지 배경과 설계 철학을 살펴봅니다.

강의 목록

공식 문서 순서대로 따라가며, 깊이 있는 질문을 통해 기능의 등장 배경과 동작 원리를 공부해요.

Routing

Next.js 라우팅, 단순히 폴더를 나누는 기능일까요?

이 섹션에서는 폴더 기반 라우팅의 철학부터 App Router의 구조, template.tsx, layout.tsx, Link component, 동작 원리까지 Next.js 라우팅의 본질과 설계 의도를 깊이 있게 탐구합니다.

왜 Next.js 가 필요할까?(기술적인 등장 배경)

공개

15분 32초

왜 Next.js 라우팅은 폴더 기반일까?

공개

18분 59초

Next.js 라우팅은 어떻게 구현 했을까?

공개

24분 36초

app router 기본 개념과 개발할 때 주의할 점

20분 19초

layout.tsx 에서 접근할 수 없는 값?!

15분 29초

template.tsx 는 언제 필요할까?

10분 23초

Next.js 에서 페이지 전환 애니메이션을?!(template.tsx 활용)

16분 10초

왜 <Link /> 를 사용해야 할까?

17분 13초

Next.js 라우팅은 어떻게 동작할까?(7가지 동작)

21분 26초

10.

웹 앱 개발시 만나는 에러의 종류?

15분 27초

11.

Next.js 에서 Error Handling 하는 법?!

17분 50초

12.

에러 설계부터 구현까지(로그인 form 예제 코드)

19분 34초

13.

loading.tsx 를 쓰면 최적화 해주는 부분?!(<Suspense />와 차이점과 선택 기준)

25분 48초

14.

왜 Dynamic Route 의 params 는 promise 로 바뀌었나?

18분 35초

15.

왜 Parallel Route가 필요할까?

17분 19초

16.

router.push() 종료 시점을 잡는 방법?

18분 47초

17.

router.refresh() VS window.location.reload()

14분 57초

18.

state 없이 modal 을 구현하는 새로운 방법?!

14분 49초

19.

왜 route.ts 와 page.tsx 는 다른 폴더에 선언해야 할까?

17분 15초

Data Fetching

Next.js에서 데이터 패칭, fetch() 위치만 신경쓰면 될까요?

이 섹션에서는 서버 중심 fetch 의 등장 배경부터, 병렬 처리의 한계, Server Component와의 연결, Server Action까지 Next.js가 제안하는 데이터 흐름의 방향성과 그 이유를 함께 살펴봅니다.

20.

왜 Data fetching 을 서버에서 해야할까?

공개

17분 58초

21.

Parallel Data fetching 의 한계와 해결책

17분 8초

22.

왜 server action 이 필요할까?

공개

22분 39초

23.

왜 props 로 함수를 전달(Server -> Client Component)할 수 없을까?

20분 46초

24.

ISR 언제 사용해야 할까?

16분 11초

Rendering

CSR, SSR, SSG, ISR, 그리고 Streaming까지.. 무엇이 정답인지 헷갈리시나요?

이 섹션에서는 Next.js의 렌더링 전략이 어떤 배경에서 등장했는지, 그리고 각 방식이 실제 프로젝트에서 어떻게 활용될 수 있는지 정리해봅니다.

25.

Server Component 렌더링

공개

28분 48초

26.

page.tsx 에서 'use client' 를 선언하면?!

공개

13분 29초

27.

왜 Client Component 에서 Server Component 를 Import 해서 호출하면 Error 가 발생할까?

21분 31초

28.

Partial Pre Rendering 이 해결하는 문제

23분 47초

29.

Next.js 렌더링 방식 중간 총정리

24분 28초

30.

streaming 렌더링이 해결한 문제?

17분 59초

자주 묻는 질문

강의에 대해 궁금한 점들을 확인해보세요

Q. 이 강의는 Next.js를 처음 접하는 개발자도 들을 수 있나요?

이 강의는 중급 이상의 실무 프론트엔드 개발자를 대상으로 합니다. Next.js를 한두 번 써본 경험이 있고, 단순 사용을 넘어서 '왜 이렇게 써야 하는지'를 고민해본 분에게 가장 잘 맞습니다.

Q. 기술면접 준비에도 도움이 되나요?

그럼요! 자주 나오는 기술 면접 질문에 대해 공식 문서 그 이상의 깊이로, 실제 코드와 구조를 기반으로 설명할 수 있는 역량을 갖추게 됩니다.

Q. 실무에 바로 적용할 수 있을까요?

실무에서 궁금한 질문을 답변하는 형태로 한편 한편을 제작했어요. 이를 통해 설계 구조를 짤 때나, 컴포넌트 구성을 고민할 때 판단의 기준을 세울 수 있는 관점과 철학을 제공합니다.

Q. 강의에서 직접 코딩 실습도 하나요?

이 강의는 코드를 따라하며 기능을 구현하는 튜토리얼 보다는, 동작 원리와 설계 철학을 이해하는 데 초점을 둡니다. 따라서 이를 돕기 위한 예제 코드를 제공합니다.

예제 코드를 제공하는 목적은 직접 구현하는 실습 보다는 개념과 구조를 깊이 파악하고 실무에 응용하는 것입니다.

Q. App Router를 다루는 강의인가요? Pages Router도 포함되나요?

주요 내용은 App Router를 중심으로 구성되어 있으며, 라우팅 구조 변화의 철학과 차이점, 그리고 왜 그렇게 바뀌었는지를 깊이 있게 다룹니다.

Pages Router 사용 경험이 있다면, App Router로 넘어가는 데 큰 도움이 될 거예요.

참고 사항

강의 수강에 필요한 환경과 제공되는 자료들을 확인해보세요

실습 환경

Node.js와 Browser

#Next.js#React#TypeScript

학습 자료

예제코드 Github repository

강의에서 다루는 모든 예제 코드를 제공합니다

질문과 답변

Discord 채널 참여

강의에 대한 질문뿐만 아니라, 기술에 대해 깊이 탐구하여 동료들과 함께 토론하며, 자신의 관점을 갖추고 싶어하는 Product Engineer들이 모여 Next.js에 관한 모든 질문에 대해 함께 공부하고 대답하는 채널이에요 :)

리뷰 0개

로그인 후 리뷰를 작성할 수 있습니다.

아직 리뷰가 없습니다.

강사 소개

Boaz

안녕하세요. Boaz 입니다.
총 4번의 이직을 거치며 다양한 스타트업을 경험 했고, 라인에서 일하다 얼마전 퇴사한 8년 차 프론트엔드 엔지니어입니다.

다양한 프로젝트에서 Next.js 를 활용하며, 저는 많은 시행착오를 겪었어요. 특히 실무에 적용하며 더 좋은 구조를 고민할 때, "왜 이렇게 구성해야 하지?", "이 기능을 써도 되는 상황인가?" 같은 질문들이 쏟아졌고, 그때부터 단순한 사용법보다 '등장 배경과 동작 원리의 이해'가더 중요하다는 걸 느꼈어요.

이 강의는 단순히 Next.js를 '쓸 수 있게' 만드는 것이 목적은 아니어요. "왜 이렇게 설계 되었는가?", "실무에서는 어떤 기준으로 선택해야 하는가?"를 함께 고민하고 싶은 분들을 위해 만들었어요.

단순히 쓸 줄 아는데 그치고 싶지 않았던 과거의 저와 같은 여러분에게, 이 강의가 정리된 관점과 기준을 제시해주는 나침반이 되었으면 합니다 😄