강의

멘토링

로드맵

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) 97 reviews

742 learners

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

Reviews from Early Learners

What you will learn!

  • 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?

The Next.js framework adds rules to React, which has a free development approach, and automatically handles routing and performance that developers need to take care of. You don't need to get lost alone in front of the vast Next.js official documentation. Because there are Korean 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 in simple terms for years, is now breaking 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

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

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

📌 We 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 examining the browser together and seeing them with our own eyes.

📌 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
good frontend developers work
What capabilities do developers recognized at NAVER, Kakao, LINE, Coupang, and Baemin 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'll develop skills to write code more accurately and faster.

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

  • You can confidently lead everything from project creation to folder structuring and overall conventions 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, 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 from when a web page is 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

  • Web-based course materials are provided that you can conveniently access anytime 😄

  • A GitHub repository where you can check the source code is also provided 📘

  • 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,218

Learners

4,699

Reviews

3,813

Answers

4.9

Rating

17

Courses

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

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

Curriculum

All

70 lectures ∙ (7hr 57min)

Published: 
Last updated: 

Reviews

All

97 reviews

4.8

97 reviews

  • minkyungs2님의 프로필 이미지
    minkyungs2

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    This is my first time taking Captain Pangyo's lecture. I am a developer who has been working without a mentor for 3 months. I have taken many lectures, but as others have said, the absorption is really good! I set a goal in a few days with quick breathing and completed the first lecture. Of course, the absorption was good, but ultimately, he said, "I will tell you this in the next lecture.", so I kept taking the next lecture because I was curious. There are many lectures that teach nextjs, but I think it is not easy to find a lecture that teaches why? and arouses curiosity. Ultimately, I think I need to dig into the principles?! In that context, I thought of him as my online mentor and he gave me great tips from the field and told me "why" I should write this code. It was really great. (I might not have been able to find or eat it in other lectures..) In that sense, teacher, please hurry up and bring the next advanced lecture using app router.. Please work without resting.. In the meantime, I will apply what you taught me to my work..

    • captain
      Instructor

      Oh my.. This is a touching class review. Haha I'm working nonstop. I'll give you a gift when the next lecture comes out! Thank you :)

  • damin2003694581님의 프로필 이미지
    damin2003694581

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    I listened to the lecture well! I look forward to the follow-up lectures :) The key points are key, but the lecture explains each point one by one and the notes that are organized and provided are especially great!

    • captain
      Instructor

      Thank you for pointing out the special features of the lecture. I will come back with the next lecture soon! :)

  • iamjjoal5302님의 프로필 이미지
    iamjjoal5302

    Reviews 8

    Average Rating 5.0

    5

    100% enrolled

    As expected of Captain Pangyo! It was a perfect lecture with concise explanations that pinpointed the necessary parts, rich lecture supplementary materials, and a perfect lecture length to maintain focus. (The diction that sticks in your ears and the great voice are a bonus) I was suddenly put in charge of a Next.js project and felt overwhelmed, but this was really helpful. I'll bow in the direction of Pangyo whenever I think of it. Please keep working like a cow! Fighting!

    • modify님의 프로필 이미지
      modify

      Reviews 2

      Average Rating 5.0

      5

      84% enrolled

      I'm a new developer who suddenly had to do Next.js and was at a loss...ㅜㅜ My position is backend, so I didn't have much experience with front-end frameworks, so I was at a loss as to where to start, but I took the course and it was so much fun at a price that's affordable for a freshman!! (The quality doesn't decrease because it's cheap!!) Some people have mentioned in other reviews that they were disappointed with the details, but I recommend it to those who have some prior learning... Personally, I liked it because it felt like it didn't have any unnecessary details and reminded me of the necessary details!! I'm praying for the advanced version starting today!!

      • nataek2159님의 프로필 이미지
        nataek2159

        Reviews 14

        Average Rating 3.2

        4

        100% enrolled

        Limited time deal ends in 7 days

        $33.00

        23%

        $42.90

        captain's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!