강의

멘토링

커뮤니티

개발 · 프로그래밍

/

프론트엔드

AI와 함께 배우는 Next.js

복잡한 Next.js의 여러 개념들을 짧은 시간에 핵심만 배울 수 있어요. Next.js를 처음 배우는 분들을 위한 실무 필수 지식만 알려드립니다. 프레임워크 강의만 8년째 진행하는 캡틴판교의 Next.js 신규 강의. "AI 시대에 프런트엔드 개발자"의 코딩과 학습 방법을 배워볼 수 있어요! :)

(4.9) 수강평 14개

수강생 175명

실습 중심
AI 코딩
next.js
react
cursorJavaScriptReactNext.js인공지능(AI)

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 최신 Next.js의 필수 개념 - SSR, Hydration, 서버/클라이언트 컴포넌트, 캐싱 등

  • AI 도구로 웹 애플리케이션을 빠르게 만드는 방법

  • Next.js 폴더/파일 구조화와 컴포넌트 설계 방법

  • Next.js 사용할 때 꼭 알아야 하는 실무 팁들

  • Next.js의 다양한 렌더링 방식과 내부 동작 원리

요즘과 같은 AI 시대에 Next.js는 어떻게 배워야 할까요?

"React는 해봤는데 Next.js는 어떻게 써야 하는지 잘 모르겠어요 🤔"
"채용 공고를 보면 자격 요건에 Next.js가 많은데 꼭 알아야 하는 걸까요? 😒"
"Next.js로 포트폴리오를 만들고 싶은데 어떻게 해야 할지 모르겠어요 😢"

최근에 대학생, 취업준비생, 실무 개발자 분들을 멘토링하면서 공통적으로 들었던 얘기들입니다. 취업도 쉽지 않고, AI가 우리 개발자들을 대체할 거라는 전망이 많던데 정말 그렇게 될까요?

"AI 도구로 2배 속도 내는 프런트엔드 개발팀 만들기 - 2025년 네이버 프런트엔드 개발자 밋업"

기업에서는 여전히 정확한 기술 지식과 기본기를 갖춘 개발자를 필요로 합니다. AI 도구를 쓸 때도 엉성하게 아는 사람보다 정확하게 이해하고 있는 사람이 만들어낸 결과물의 품질이 더 우수하죠.

"AI 시대의 FE 개발자는 어떤 역할을 해야 하는가? - 2025년 FEConf 개발 리더 패널 토크"

이번 강의는 AI 시대에 프론트엔드 개발자로서 무엇에 집중해야 하고, 어떤 기술을 갈고닦아야 하는지를 명확히 짚어봅니다. 프로젝트 하나를 생성하고 배포까지 해보면서 실무에서 꼭 알아야 하는 개념만 빠르게 배워볼 수 있습니다.

이 강의의 특징

📌 프레임워크 강의만 8년째. 현업 프론트엔드 개발자의 짜임새 있고 재미있는 Next.js 교과과정

📌 백엔드 REST API를 직접 호출하면서 실제 실무 환경과 유사한 상황을 미리 경험해 볼 거예요.

📌 이론 30% 실습 70%의 비율. 구현과 에러 디버깅 중심 강의. 만들면서 배우는게 가장 머리에 많이 남죠.

📌 NPM, Node.js, ES6+, Git 등 관련 지식에 대한 무료 강의와 자세한 문서를 모두 제공합니다.

📌 AI 도구를 이용해서 학습 시간을 단축하고, 꼭 필요한 내용에 집중해요.

인프런 교안

강의를 듣는 중에, 그리고 강의를 듣고 나서도 이동하면서 편하게 볼 수 있는 웹 교안이 제공됩니다 😄

이런 분들께 추천해요

Next.js를 빨리 배워야 해요

Next.js로 프로젝트를 해야 하는데 한번도 안써봤어요. 공식 문서를 다 보기에는 시간이 부족하다고 느끼는 실무자

프론트엔드 개발자로
취업하고 싶어요

기업에서 요구하는 신입 개발자의 수준은 어느 정도인가요? 실무에서 꼭 필요한 역량이 궁금한
취업 준비생

AI 도구를 어떻게 써야 할까요?

프론트엔드 개발자는 AI 도구를 어떻게 써야 할까요? 대기업 실무에서는 AI 도구를 어떻게 쓰고 있는지 궁금한 주니어 개발자

수강 후에는

  • Next.js로 React 웹 애플리케이션을 만들고 배포하는 것에 두려움이 없어요.

  • AI 도구를 이용해서 빠르게 웹 서비스를 만들고 다듬는 것에 능숙해요.

  • SSR, Hydration, Server Component, Client Component, RSC Payload 등 복잡한 개념들을 쉽게 설명할 수 있어요.

  • 실무 프로젝트 폴더 구조를 구성하는 방법과 컴포넌트 설계 방법을 알게 되었어요.

  • 면접에서 당당히 얘기할 수 있는 취업 포트폴리오가 하나 생겼어요.

이런 내용을 배워요.

AI 도구를 프론트엔드 개발에 활용하는 방법

Next.js 라우팅 기법과 내장 컴포넌트

Next.js 실무 프로젝트 폴더/파일 구조화 방법

RSC, RCC, SSR, Hydration, 렌더링 등 고급 개념

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

수강 전 참고 사항

실습 환경

  • 강의는 MacOS 기준으로 설명합니다. Windows 사용자에게 필요한 프로그램도 모두 안내해요.

  • 개발툴로 Cursor를 사용합니다. VSCode 사용자도 강의 듣는데 무리가 없으실 거예요 😄

학습 자료

  • 언제 어디서나 편하게 볼 수 있는 Next.js 교안을 제공합니다.

  • 실무에서 많이 쓰이는 Next.js Page Router 강의무료로 제공합니다.

  • JavaScript, NPM, Node.js, ES6+ 등의 주변 지식은 모두 무료 강의와 친절한 문서로 제공합니다 :)

선수 지식 및 유의사항

  • 자바스크립트 기본 문법(변수, 함수 등)을 알고 있으면 좋아요 - 자바스크립트 무료 강의

  • 리액트 기초 지식(jsx, 컴포넌트, 프롭스)을 알고 있으면 좋아요. - 리액트 기초 강의

  • 그외 고급 지식은 모두 강의에서 설명해 드립니다 😎

  • AI로만 Next.js를 배우는 강의는 아닙니다. 기술을 배울 때 실무자 관점에서 AI를 활용하는 방법을 배울 수 있어요.

캡틴 판교

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 최신 Next.js를 최대한 빨리 배워서 뭔가를 만들어 보고 싶은 웹 개발자

  • 실무에서 어떻게 AI 도구를 사용하는지 궁금한 주니어 개발자

  • Next.js로 실무 프로젝트를 진행해야 하는 프론트엔드/백엔드 개발자

  • React는 해봤지만 Next.js는 한번도 안해본 프론트엔드 개발자

  • 프론트엔드 채용 공고의 필수 자격 요건을 갖추고 싶은 취업 준비생

  • 실무 서비스 개발 경험이 궁금한 취업 준비생

선수 지식,
필요할까요?

  • JavaScript

  • React

안녕하세요
입니다.

48,875

수강생

4,774

수강평

3,815

답변

4.9

강의 평점

19

강의

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

커리큘럼

전체

64개 ∙ (7시간 53분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

14개

4.9

14개의 수강평

  • 이성민님의 프로필 이미지
    이성민

    수강평 1

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    AI를 도구로 활용한 강의로, 빠르게 프로젝트 흐름을 따라가며 Next.js의 핵심을 익히기에 매우 효율적입니다. 각 강의는 꼭 알아야 할 개념 위주로 정리되어 있어 전체적인 구조를 잡기 쉬웠고, 강의 길이와 템포가 잘 조절되어 있어 부담 없이 소화할 수 있었고, 설명도 핵심을 간결하게 짚어줘 초보자도 이해하기 쉬웠습니다.

    • 구수정님의 프로필 이미지
      구수정

      수강평 1

      평균 평점 5.0

      5

      31% 수강 후 작성

      캡팡님 역시 딕션도 너무 좋으시고 설명도 알차셔서 좋아요! 함께 디버깅해보고 세세한 오류처리 같은 부분은 사실 누구한테 물어보기도 애매한 부분인데 이제 막 시작하시는 비기너분들에게 너무 도움이 될만한 강의입니다!

      • 양성진님의 프로필 이미지
        양성진

        수강평 1

        평균 평점 5.0

        5

        31% 수강 후 작성

        듣기가 되게 좋네요 그리고 많은걸 한번에 가르치기보단 천천히 빌드업하듯이 단계별로 알게되서 너무 좋습니다.

        • 장기효(캡틴판교)
          지식공유자

          오 제가 의도했던 걸 잘 짚어주셔서 감사합니다 성진님 :) 후속 콘텐츠도 기대해 주세요!

      • xogml7734님의 프로필 이미지
        xogml7734

        수강평 2

        평균 평점 5.0

        5

        31% 수강 후 작성

        • Cody Yun님의 프로필 이미지
          Cody Yun

          수강평 10

          평균 평점 4.9

          5

          25% 수강 후 작성

          단순히 Next.js를 가르쳐 주시는것에 그치지 않고, AI 도구를 활용해 이렇게 학습할 수 있다는걸 보여주는 좋은 강의입니다. 게다가 Next.js 시작하기 강의 쿠폰까지 주시니 이 강의를 빠르게 완강 후 조금 더 자세히 살펴볼 수 있어서 좋네요.

          • 카톡방까지 들어와서 수강평 남겨주신게 감동이었습니다 Cody님. 감사드려요!! :)

        ₩44,000

        장기효(캡틴판교)님의 다른 강의

        지식공유자님의 다른 강의를 만나보세요!

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!