강의

멘토링

커뮤니티

Programming

/

Front-end

Learning Next.js with AI

You can learn the core concepts of complex Next.js in a short time. We'll teach you only the essential practical knowledge for those learning Next.js for the first time. Captain Pangyo's new Next.js course, who has been conducting framework courses for 8 years. You can learn the coding and learning methods of "Frontend Developers in the AI Era"! 😊

(4.8) 23 reviews

197 learners

Level Beginner

Course period Unlimited

  • captain
실습 중심
실습 중심
AI 코딩
AI 코딩
next.js
next.js
react
react
cursor
cursor
JavaScript
JavaScript
React
React
Next.js
Next.js
AI
AI
실습 중심
실습 중심
AI 코딩
AI 코딩
next.js
next.js
react
react
cursor
cursor
JavaScript
JavaScript
React
React
Next.js
Next.js
AI
AI

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

이성민

100% enrolled

This is a lecture that utilizes AI as a tool, making it very efficient for quickly following the project flow and learning the core concepts of Next.js. Each lecture is organized around essential concepts, making it easy to grasp the overall structure. The lecture length and pace are well-balanced, allowing for easy absorption without burden, and the explanations concisely highlight key points, making it easy for beginners to understand.

5.0

구수정

31% enrolled

Captain Pang, your diction is excellent and your explanations are so substantial and great! Debugging together and handling detailed error processing - these are actually parts that are awkward to ask anyone about, but this is a lecture that would be so helpful for beginners who are just starting out!

5.0

양성진

31% enrolled

The listening experience is really good, and rather than teaching a lot all at once, I really like how it helps you learn step by step, building up gradually.

What you will gain after the course

  • Essential Concepts of Modern Next.js - SSR, Hydration, Server/Client Components, Caching, etc.

  • How to Quickly Build Web Applications with AI Tools

  • Next.js Folder/File Structure and Component Design Methods

  • Essential Practical Tips You Must Know When Using Next.js

  • Next.js's Various Rendering Methods and Internal Operating Principles

How should we learn Next.js in the current AI era?

"I've tried React, but I'm not sure how to use Next.js 🤔"
"I see Next.js in the requirements for many job postings - is it something I must know? 😒"
"I want to create a portfolio with Next.js, but I don't know how to go about it 😢"

These are common concerns I've been hearing recently while mentoring college students, job seekers, and working developers. Getting a job isn't easy, and there are many predictions that AI will replace us developers - do you think that will really happen?

"Building a Frontend Development Team That Doubles Speed with AI Tools - 2025 Naver Frontend Developer Meetup"

Companies still need developers with accurate technical knowledge and solid fundamentals. Even when using AI tools, the quality of results produced by someone who understands accurately is superior to that of someone with superficial knowledge.

"What role should FE developers play in the AI era? - 2025 FEConf Development Leader Panel Talk"

This lecture clearly identifies what frontend developers should focus on and which skills they need to hone in the AI era. By creating and deploying a complete project, you can quickly learn only the essential concepts you must know in real-world practice.

Features of this course

📌 8 years of framework lectures. A well-structured and engaging Next.js curriculum from a professional frontend developer

📌 We'll call the backend REST API directly to experience situations similar to actual work environments in advance.

📌 30% theory, 70% hands-on practice ratio. Implementation and error debugging focused lectures. Learning by building is what sticks in your head the most.

📌 We provide free lectures and detailed documentation for all related knowledge including NPM, Node.js, ES6+, Git, and more.

📌Reduce study time using AI tools and focus on essential content.

인프런 교안

While listening to the lecture, and even after finishing the lecture, web materials are provided that you can conveniently view while on the move 😄

I recommend this for people like this

I need to learn Next.js quickly

I need to work on a project with Next.js, but I've never used it before. I'm a working professional who feels like there isn't enough time to go through all the official documentation.

I want to get a job as a
frontend developer

What level do companies expect from entry-level developers? I'm curious about the essential skills needed in practice
Job seekers

How should we use AI tools?

How should frontend developers use AI tools? Junior developers who are curious about how AI tools are being used in actual work at large companies

After taking the course

  • I have no fear in creating and deploying React web applications with Next.js.

  • I'm skilled at quickly creating and refining web services using AI tools.

  • I can easily explain complex concepts like SSR, Hydration, Server Component, Client Component, RSC Payload, etc.

  • I learned how to structure practical project folders and design components.

  • I now have a job portfolio that I can confidently talk about in interviews.

You'll learn content like this.

How to Utilize AI Tools in Frontend Development

Next.js Routing Techniques and Built-in Components

Next.js Production Project Folder/File Structure Organization Methods

Advanced concepts such as RSC, RCC, SSR, Hydration, rendering, etc.

The person who created this course 👨‍💻

Jang Gihyo (Captain Pangyo)

Pre-enrollment Reference Information

Practice Environment

  • The course is explained based on MacOS. All necessary programs for Windows users are also provided.

  • I use Cursor as my development tool. VSCode users should also have no trouble following the course 😄

Learning Materials

  • We provide Next.js course materials that you can conveniently access anytime, anywhere.

  • We provide the Next.js Page Router course frequently used in practice for free.

  • JavaScript, NPM, Node.js, ES6+ and other related knowledge are all provided through free lectures and Kind documentation :)

Prerequisites and Important Notes

  • It's good to know basic JavaScript syntax (variables, functions, etc.) - Free JavaScript Courses

  • It's good to know the basics of React (JSX, components, props). - React Basics Course

  • All other advanced knowledge is explained in the lectures 😎

  • This is not a course that teaches Next.js using only AI. You can learn how to utilize AI from a practitioner's perspective when learning technology.

캡틴 판교

Recommended for
these people

Who is this course right for?

  • A web developer who wants to learn the latest Next.js as quickly as possible and build something with it

  • Junior developers curious about how to use AI tools in real-world work

  • Frontend/Backend developers who need to work on real-world projects with Next.js

  • A frontend developer who has experience with React but has never tried Next.js

  • Job seekers who want to meet the essential qualifications listed in frontend developer job postings

  • Job seekers curious about practical service development experience

Need to know before starting?

  • JavaScript

  • React

Hello
This is

49,237

Learners

4,846

Reviews

3,815

Answers

4.9

Rating

19

Courses

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

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

Curriculum

All

64 lectures ∙ (7hr 53min)

Published: 
Last updated: 

Reviews

All

23 reviews

4.8

23 reviews

  • lsm66275394님의 프로필 이미지
    lsm66275394

    Reviews 2

    Average Rating 5.0

    Edited

    5

    100% enrolled

    This is a lecture that utilizes AI as a tool, making it very efficient for quickly following the project flow and learning the core concepts of Next.js. Each lecture is organized around essential concepts, making it easy to grasp the overall structure. The lecture length and pace are well-balanced, allowing for easy absorption without burden, and the explanations concisely highlight key points, making it easy for beginners to understand.

    • 9sujeongdev2345님의 프로필 이미지
      9sujeongdev2345

      Reviews 1

      Average Rating 5.0

      5

      31% enrolled

      Captain Pang, your diction is excellent and your explanations are so substantial and great! Debugging together and handling detailed error processing - these are actually parts that are awkward to ask anyone about, but this is a lecture that would be so helpful for beginners who are just starting out!

      • sungjiny2193님의 프로필 이미지
        sungjiny2193

        Reviews 2

        Average Rating 5.0

        5

        31% enrolled

        The listening experience is really good, and rather than teaching a lot all at once, I really like how it helps you learn step by step, building up gradually.

        • captain
          Instructor

          Oh, thank you for picking up on what I was aiming for, Sungjin! :) Please look forward to the follow-up content too!

      • xogml77343811님의 프로필 이미지
        xogml77343811

        Reviews 2

        Average Rating 5.0

        5

        31% enrolled

        • goodmorningcody8228님의 프로필 이미지
          goodmorningcody8228

          Reviews 10

          Average Rating 4.9

          5

          25% enrolled

          This is a great course that doesn't just teach Next.js, but also shows how you can learn using AI tools. Plus, they even provide a coupon for the Next.js Getting Started course, so after quickly completing this course, you can dive deeper into the details, which is really nice.

          • captain
            Instructor

            It was so touching that you even came into the KakaoTalk room to leave a course review, Cody. Thank you!! :)

        $34.10

        captain's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!