강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Getting Started with Next.js

The Next.js framework that you must know when starting React. Easy explanations from the perspective of beginners and in-depth understanding of the operating principles that satisfy practitioners. Solve Next.js in one go.

(4.8) 100 reviews

810 learners

  • captain
next
캡틴판교
Next.js
React
JavaScript

Reviews from Early Learners

What you will gain after the course

  • Next.js 14 (Latest Version)

  • Next.js Practical Project Folder Structure

  • Next and React Component Design

  • Next.js Practical Coding Tips

  • React

  • JavaScript

  • NPM

  • REST API

  • Networks and the HTTP Protocol

  • Performance Optimization

I've been seeing Next.js used a lot - how should I learn it? 🤔

The Next.js framework is almost the top choice for starting React projects. I'm still not very familiar with React, so how should I go about learning Next.js?

React, which offers flexible development approaches, gets additional rules with Next.js framework that automatically handles routing, performance, and other aspects developers need to manage. You don't need to get lost alone in front of the extensive Next.js official documentation. We have Korean learning materials that are easier to understand than the Next.js official documentation. ❤


Captain Pangyo, who has been explaining difficult technologies from a beginner's perspective for years, now breaks down Next.js for you. From easy terminology explanations that consider beginners and visual demonstrations of operating principles, to practical concept explanations that captivate professionals including rendering, networking, performance, and hydration. The Getting Started with Next.js course will help you.

Features of this course

📌 Learn everything from basic to advanced Next.js concepts by building a shopping mall site integrated with REST API.

📌 An 11-year veteran frontend developer's honey tips for writing code quickly and accurately in a short time

📌 We'll also teach you essential knowledge for real-world practice, including Chrome Developer Tools, HTTP protocol, performance optimization, and more

📌 Hands-on exercises are placed throughout to help you digest the content you've learned along the way.

📌 We'll understand all concepts like CSR, SSR, Hydration, client navigation, etc. by directly opening up the browser and seeing them with our own eyes together.

📌 Web-based lecture materials are provided that can be easily accessed anytime, anywhere.

I recommend this for people like this

Let's start a Next.js project.

I don't know React well, but I need to work on a company project using Next.js.
What concepts and technologies should I learn to make development easier?

I'm preparing for job applications with React.
Next.js is listed in the qualifications
for every job posting,
but what capabilities do companies actually require?

I'm curious about how
skilled frontend developers work
What capabilities do developers recognized at top tech companies possess?
I'm curious about the knowledge and know-how that experienced practitioners have.

After taking the course

  • It becomes easier to implement web applications with Next.js.

  • You will develop skills to write code more accurately and faster.

  • You will learn not only client-level knowledge but also about servers, networks, and performance optimization.

  • You can confidently lead everything from project creation to overall conventions like folder structuring in real-world work.

You'll learn content like this.

Practical project folder structure and practical development environment setup methods

Learn how to design folder structures based on Next.js fundamental concepts and how to reduce code typing and improve development productivity using ESLint and Prettier.

Essential Concepts and Syntax of React + Next.js

Explains the flow of written code with kind and specific diagrams so you can understand it accurately. A generous lecture that covers not only CSR, SSR, and Hydration, but also all essential React and JavaScript syntax 🎁

Deep understanding of networks, HTTP, and performance optimization

I'll show you visually and explain the resource request and rendering process of how web pages are drawn. I'll break down all unfamiliar terms from a beginner's perspective, including servers, CDN, HTTP, performance optimization, and more

How to write code quickly and accurately in a short time and shortcut tips from experienced professionals

Coding skills and implementation capabilities are among the most important skills for professionals. We're sharing a massive collection of shortcuts and coding tips that will help you implement many features accurately and quickly in a short amount of time 🚀

The person who created this course 👨‍💻

Jang Gihyo (Captain Pangyo)

"People Inflearn Has Met" Interview


Pre-enrollment Reference Information

Practice Environment

  • Operating System and Version (OS): Although Mac is used in the lectures, all Windows-related shortcuts are also explained.

  • Tools Used: VSCode

Learning Materials

  • A website textbook that you can view comfortably anytime is provided 😄

  • You can also check the source code in the provided GitHub repository 📘

  • We also provide numerous free educational videos and materials that you can watch to gain even more knowledge ❤

Prerequisites and Important Notes

위즈 띠배너 모음
도라 띠배너 모음 (3)

Recommended for
these people

Who is this course right for?

  • Getting Started with Next.js

  • Beginners who want to learn React and Next.js at the same time

  • Front-end developers who are curious about Next.js practical development

  • Web developers interested in Next.js

Need to know before starting?

  • React Basic Grammar (I recommend you to listen to the lecture introduced in the previous player knowledge)

  • JavaScript Basic Grammar

Hello
This is

48,947

Learners

4,793

Reviews

3,815

Answers

4.9

Rating

19

Courses

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

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

Curriculum

All

70 lectures ∙ (7hr 57min)

Published: 
Last updated: 

Reviews

All

100 reviews

4.8

100 reviews

  • 김민경님의 프로필 이미지
    김민경

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    판교 캡틴님 강의는 처음 수강하네요 저는 사수 없이 일하고 있는 3개월 차 개발자입니다. 제가 많은 강의를 들어보았지만 다른 분들 이야기 하시는 것처럼 흡입력이 굉장히 좋으시네요! 빠른 호흡으로 몇 일만에 목표를 잡아두고 1차 완강을 해내었습니다. 물론 흡입력도 좋았지만 궁극적으로 "이건 다음 강의에서 알려드릴게요." 하시는데 궁굼해서 계속적으로 다음 강의를 듣게 되네요. nextjs 를 가르치는 강의는 많이 보실 수 있지만, 왜? 를 가르쳐 주고 궁굼증을 일으키게 하는 강의는 찾기 쉽지 않다고 생각합니다. 궁극적으로 원론? 을 파헤쳐야 한다고 점점 생각이 드는데요! 그런 맥락에서 제 온라인 사수 라고 생각하고 현업에서의 꿀팁과 이 코드를 "왜" 작성해야 하는지 알려주셔서 너무 좋았습니다. (여타의 강의에서는 제가 못 찾거나 떠먹지 못할 수도 있었겠지만요 ..) 그런 의미에서 선생님 얼른 앱라우터를 이용한 심화 next 강의 가져와주세요 .. 쉬지말고 일해주십시오.. 그 동안 저는 가르쳐 주신 것을 현업에 녹아내고 있겠습니다..

    • 장기효(캡틴판교)
      Instructor

      세상에.. 감동적인 수강평이네요 ㅋㅋ 쉬지 않고 일하고 있습니다. 다음 강의 나오면 선물로 드릴게요! 감사합니다 :)

  • damin200369님의 프로필 이미지
    damin200369

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    강의 잘 들었습니다! 후속으로 나올 강의들도 기대하겠습니다 :) 핵심도 핵심이지만, 강의에서 하나하나 설명해주시고 특히 정리해서 제공해주시는 노트가 너무 좋습니다!

    • 강의 특장점들을 잘 짚어주셔서 감사합니다. 다음 강의도 빨리 들고 올게요! :)

  • Ara Jo님의 프로필 이미지
    Ara Jo

    Reviews 10

    Average Rating 5.0

    5

    100% enrolled

    역시 캡틴판교! 필요한 부분을 딱 짚어주는 군더더기 없는 설명에 강의 보충 자료도 풍부하고 집중하기 딱 좋은 강의 길이 등등 정말 완벽한 강의였습니다 (귀에 딱딱 박히는 딕션에 멋진 목소리는 덤) 갑자기 next.js 안건을 맡게 되어 막막했는데 정말 많은 도움이 되었어요 생각날때마다 판교쪽으로 절 한번씩 올릴게요 앞으로도 소처럼 일해주세요 화이팅!

    • 퇴근하고싶어님의 프로필 이미지
      퇴근하고싶어

      Reviews 2

      Average Rating 5.0

      5

      84% enrolled

      갑자기 Next.js를 할 일이 생겨서 막막했던 신입 개발자 입니다...ㅜㅜ 포지션도 백엔드라 기존에 프론트 관련 프레임워크를 다룰일이 별로 없어서 뭐부터 접근해야할까 막막했는데 사회 초년생에게 부담 없는 가격으로 너무 재밌게 수강했습니다!! (저렴하다고 퀄리티가 떨어지지 않습니다!! ) 다른 수강평에서 디테일에 대한 아쉬움을 말씀하시는 분들도 있는데, 어느정도 사전 학습이 되어있는 분들이 듣기를 추천드립니다... 저는 개인적으로 오히려 군더더기가 없고 필요한 디테일을 다시 상기시켜주신다는 느낌으로 잡아주시고 가주셔서 너무 좋았습니다!! 심화편 기원 오늘부터 물떠놓고 기도합니다!!

      • 민경언님의 프로필 이미지
        민경언

        Reviews 15

        Average Rating 3.3

        4

        100% enrolled

        Limited time deal ends in 5 days

        $33,000.00

        25%

        $34.10

        captain's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!