강의

멘토링

로드맵

BEST
Programming

/

Front-end

Next.js Deep Dive: From "Developer Who Can Use It" to "Developer Who Knows and Uses It"

Let's delve into the source code together, from technical interviews to practical design. I'll help you develop the deep understanding and unique perspective necessary for the AI era. Grow from a developer who simply "used" Next.js to an expert who "understands" why it's used that way.

(4.7) 18 reviews

210 learners

  • Boaz
웹개발
Nextjs
Next.js
React
TypeScript

Reviews from Early Learners

What you will learn!

  • Next.js Working Principles Common in Tech Interviews

  • Actionable Design Principles

  • Next.js's Tech Philosophy & Essence Relevant in the AI Age

  • Your own criteria and perspective to better select and utilize frameworks

(이미 업로드 했던 유튜브 영상(현재 비공개)과 새로운 영상(7개)을 강의로 묶은 것이어요.
소장하기를 원하시는 분들만 수강신청 부탁드려요. 🙏)

Next.js를 '어떻게'가 아니라 '왜' 쓰는지 설명할 수 있게 돕는 강의입니다.

이런 분들께 추천해요

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

익숙하게 쓰고 있지만, 내부 동작 원리가 궁금한 분

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

개념은 아는데, 질문을 받으면 정리된 답변을 하기 어려운 분

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

트렌드에 휩쓸리지 않고 기술의 본질을 꿰뚫고 싶은 분

🎯 수강 후에는

  • Next.js의 핵심 개념(라우팅, 렌더링, 에러 처리 등)을 단순히 사용하는 수준을 넘어서, 왜 그렇게 설계되었는지 설명할 수 있게 됩니다.

  • 기술 면접에서 자주 나오는 질문들에 대해, 자신의 언어로 명확하고 논리적으로 대답할 수 있는 실력을 갖추게 됩니다.

  • 공식 문서나 튜토리얼만으로는 얻을 수 없었던 프레임워크의 철학과 동작 원리에 기반한 실무 설계 기준을 만들 수 있습니다.

  • ‘남들이 만든 구조를 따라 쓰는 개발자’에서, ‘자신의 기준으로 구조를 판단하고 설명할 수 있는 개발자’로 성장하게 됩니다.

  • 변화하는 프론트엔드 기술 흐름 속에서도, 기술을 보는 시야와 선택 기준을 스스로 세울 수 있는 자신감을 얻게 됩니다.

이 강의의 핵심 강점

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

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

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

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

이런 내용을 배워요

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

섹션 (1) Routing

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

섹션 (2) Data fetching

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

섹션 (3) Rendering

CSR, SSR, SSG, ISR, 그리고 Streaming까지.. 렌더링 방식이 많아질수록 “무엇이 정답인지” 헷갈리기 쉬운 것 같아요.
이 섹션에서는 Next.js의 렌더링 전략이 어떤 배경에서 등장했는지,
그리고 각 방식이 실제 프로젝트에서 어떻게 활용될 수 있는지 정리해봅니다.

궁금한 점이 있나요?

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

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

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

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

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

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

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

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

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

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

주요 내용은 App Router를 중심으로 구성되어 있으며, 라우팅 구조 변화의 철학과 차이점, 그리고 왜 그렇게 바뀌었는지를 깊이 있게 다룹니다.
Pages Router 사용 경험이 있다면, App Router로 넘어가는 데 큰 도움이 될 거예요.

수강 전 참고 사항

실습 환경

  • Nodejs 와 Browser

  • #Next.js #React #Typescript


질문과 답변

  • https://discord.gg/fpCrBJWCtz :

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

Recommended for
these people

Who is this course right for?

  • Someone who has used Next.js but gets tongue-tied only during technical interviews.

  • Wanting to grow from 'just a coder' to 'a deeply knowledgeable expert'

  • Next.js source code analysis: Lost on where to start?

  • AI Era: For those seeking essential frontend engineer competitiveness.

Hello
This is

210

Learners

18

Reviews

15

Answers

4.7

Rating

1

Course

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

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

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

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

Curriculum

All

31 lectures ∙ (9hr 51min)

Published: 
Last updated: 

Reviews

All

18 reviews

4.7

18 reviews

  • nyamnyamgood님의 프로필 이미지
    nyamnyamgood

    Reviews 14

    Average Rating 5.0

    5

    31% enrolled

    This is not your average introductory course that just teaches you how to write code. It delves deeply into the philosophical background and technical implementation methods of Next.js routing, data fetching, and rendering. In particular, topics such as 'How is Next.js routing implemented?' and 'Why did the params of Dynamic Route change to a promise?' help you understand 'why' it was designed that way, not just how to use it. This is the only lecture that has clearly helped me understand the essence and optimization points of Server Components, as I was only using CSR with 'use client' in practice. I feel like I can finally use Next.js properly. I'm really looking forward to the next lecture!

    • jihunkim6251444님의 프로필 이미지
      jihunkim6251444

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      I've been working on several projects using Next.js so far, but I always wondered if my understanding of the framework I was using was insufficient. However, after taking this course, I feel like I've gained a clear understanding of why one should use Next.js, a React-based framework. In particular, there were many parts of the concepts of server routing and server components that I couldn't understand even by looking at the official documentation, but I was able to learn those parts through actual example code and understand them easily through the instructor's highly intuitive explanations. I used to feel like I was only superficially implementing features while working on projects. However, now, when implementing any feature, I can also consider, 'Why is this approach a better choice?' and 'What are the pros and cons of this structure?'. Thanks to this, my fear of Next.js has also disappeared, and furthermore, I've gained confidence that I can easily absorb new features no matter what version appears. This course is highly recommended for those who want to understand the fundamental principles and design intentions, not just superficial usage. I am confident that this course I took can be a turning point for developers who want to properly understand Next.js.

      • dlawnsdlekd7259님의 프로필 이미지
        dlawnsdlekd7259

        Reviews 1

        Average Rating 5.0

        5

        20% enrolled

        This is an excellent course. I've never seen a course this in-depth on Inflearn before. I could understand why Next.js was designed this way. Just trying things out without meaningful study doesn't stick in your memory even after a short time. Learning *why* it was designed this way helps it stick in your memory for a long time. It also naturally helps with interview prep. As someone who wasted a lot of money on follow-along project courses, I highly recommend this in-depth course.

        • near님의 프로필 이미지
          near

          Reviews 25

          Average Rating 5.0

          5

          10% enrolled

          This course helped me upgrade from simply using Next.js to truly understanding its principles. Technology is constantly and rapidly changing, but understanding the fundamental principles makes it easy to adapt to changes. I recommend this to anyone who is using Next.js but has questions like, "Why is this structure necessary?" Thank you for the great course! 🥰

          • jaewon4576님의 프로필 이미지
            jaewon4576

            Reviews 1

            Average Rating 5.0

            5

            100% enrolled

            • boaz
              Instructor

              Hello Jaewon Choi, thank you for studying with us and leaving a course review. I'm especially grateful that you wrote it after completing 100% of the course :)

          $118.80

          Similar courses

          Explore other courses in the same field!