강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Getting Started with Next.js

The Next.js framework you must know when starting with React. From easy explanations for beginners to in-depth understanding of how it works that satisfies professionals. Master Next.js all at once.

(4.8) 101 reviews

832 learners

Level Basic

Course period Unlimited

  • captain
Next.js
Next.js
React
React
JavaScript
JavaScript
Next.js
Next.js
React
React
JavaScript
JavaScript

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

김민경

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..

5.0

damin200369

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!

5.0

Ara Jo

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!

What you will gain after the course

  • Next.js 14 (latest version)

  • Next.js Production Project Folder Structure

  • Next and React Component Design

  • Next.js Practical Coding Tips

  • React

  • JavaScript

  • NPM

  • REST API

  • Network and HTTP Protocol

  • Performance Optimization

I see Next.js being used a lot, how should I learn it?🤔

The Next.js framework is almost the top choice for starting a React project. If you're still not familiar with React, how should you go about learning Next.js?

The Next.js framework adds structure to React's flexible development approach and automatically handles routing, performance, and other concerns that developers would otherwise need to manage themselves. You don't need to get lost navigating the extensive Next.js official documentation alone. That's because we have Korean course materials that are easier to understand than the official Next.js documentation. ❤


Captain Pangyo, who has been explaining difficult technologies easily from a beginner's perspective for years, now breaks down Next.js for you. From easy-to-understand terminology for beginners and visually demonstrated operating principles to practical concepts that captivate professionals such as rendering, networking, performance, and hydration. The Getting Started with Next.js course is here to help you.

Key Features of This Course

📌 Master 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 tips for writing code quickly and accurately in a short amount of time

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

📌 Hands-on exercises are placed throughout to help you digest what you've learned.

📌 All concepts such as CSR, SSR, Hydration, and client navigation are understood by directly opening the browser and seeing them with your own eyes.

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

We recommend this for

Start a Next.js project.

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

I'm preparing for a job with React.
Every job posting has
Next.js in the requirements,
but what skills do companies actually need?

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

After taking the course

  • Building web applications with Next.js becomes easier.

  • You'll develop skills to write code more accurately and quickly.

  • You'll gain knowledge not only at the client level, 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.

Here's what you'll learn.

Real-world project folder structure and practical development environment setup methods

Learn how to design folder structures based on Next.js fundamentals and reduce code typing while improving development productivity using ESLint and Prettier.

Essential Concepts and Syntax of React + Next.js

Explains the flow of your code with kind and detailed diagrams so you can understand it precisely. A generous course that covers not only CSR, SSR, and Hydration, but also essential React and JavaScript syntax 🎁

Deep understanding of networks, HTTP, and performance optimization

I explain the resource request and rendering process until a web page is drawn by showing you directly with your own eyes. I break down and explain all unfamiliar terms from a beginner's perspective, including server, CDN, HTTP, and performance optimization

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

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

Who created this course 👨‍💻

Captain Pangyo

"People Met by Inflearn" Interview


Notes Before Taking the Course

Practice Environment

  • Operating System and Version (OS): The course uses Mac, but all Windows-related shortcuts are also explained.

  • Tools used: VSCode

Learning Materials

  • A website-based course material is provided that you can view comfortably anytime 😄

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

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

Prerequisites and Important Notes

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

Recommended for
these people

Who is this course right for?

  • Beginners starting with Next.js

  • Beginners who want to learn React and Next.js at once

  • Frontend developers curious about practical Next.js development

  • Web developers interested in Next.js

Need to know before starting?

  • React basic syntax (We recommend taking the courses mentioned in the prerequisites above)

  • JavaScript Basic Syntax

Hello
This is

49,267

Learners

4,853

Reviews

3,816

Answers

4.9

Rating

19

Courses

I have been sharing knowledge on Inflearn for 8 years. 🏠 Tech Blog, 📣 Twitter, 💻 GitHub

📗 Do it! Vue.js Introduction, Easy TypeScript and 3 other books authored
📖 Cracking Vue.js, TypeScript Handbook, Webpack Handbook. 3 online free guidebooks authored
👨‍💻 Operating Captain Pangyo's Frontend Development YouTube Channel - A place to hear the concerns of job seekers and junior developers
🥤 Operating Captain Pangyo's KakaoTalk Open Chat Room - A place to get the latest frontend development information and hear the thoughts and concerns of industry peers

Curriculum

All

70 lectures ∙ (7hr 57min)

Published: 
Last updated: 

Reviews

All

101 reviews

4.8

101 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 10

    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 15

        Average Rating 3.3

        4

        100% enrolled

        $34.10

        captain's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!