강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Getting Started with Next.js - A Quick Look at the Official Documentation

Learn the latest Next.js with the official documentation. Understand why Next.js is needed as a problem-solving tool!

(4.9) 70 reviews

731 learners

  • hajoeun
3시간 만에 완강할 수 있는 강의 ⏰
next.js
next.js13
Next.js
공식문서
React
TypeScript

Reviews from Early Learners

What you will gain after the course

  • Understanding the Need for Next.js as a Problem Solving Tool

  • Learn and get familiar with the basic concepts of Next.js and App Router.

  • A sneak peek at the server components (RSC) introduced in React 18

Studying with Carrot Engineer
Next.js 13! 💡

If you're a front-end developer, Next.js

Next.js is a powerful tool for building and deploying web apps.
Next.js, which enables the quick and efficient building of web apps, is currently actively used by companies such as Netflix, Nike, and TikTok.

Hello! This is Ha Jo-eun 👋

After working at Maple and Banksalad, I am currently working as a front-end engineer at Carrot.

Front-end engineers often feel overwhelmed by the new technologies being introduced every day . Perhaps you're also feeling the pressure of Next.js. This pressure has likely increased with the recent release of Next.js 13, which incorporates the latest features of React 18.

I was like that too. I'd used Next.js before, but I didn't understand the new concepts.

I created this course after making a determined effort to understand a new technology. You probably know that you learn the most when you teach. I prepared this course with the mindset of learning and sharing what I learned. Through this course, I hope to convey the following values to you.

  • 1️⃣ Let me tell you why you should learn Next.js among many frameworks.
    • I hope you'll gain some wisdom that will serve as a good guideline when choosing new tools as a front-end engineer in the future.
  • 2️⃣ We will go over the key concepts you need to know in Next.js version 13.
    • As we look at the new routing system, App Router, server components, data fetching, caching, and revalidating, I hope you'll think, "It's not that hard after all."
  • 3️⃣ Apply the core concepts you learned while creating an app .
    • I hope that you will make mistakes and encounter errors during this process, and gain valuable information that will be useful in practice.

I made this with this person in mind 💁‍♂️

😢 Next.js... I'm the only one who doesn't know

I'm learning React and using it in my work, but I haven't properly learned Next.js yet. Everyone talks about it, but I feel like I'm the only one who doesn't know about it, so I'm worried.

📌 Just because others are talking about a new technology doesn't mean you have to learn it. It's never too late to learn when you really need it. However, if you're looking to discuss Next.js with fellow developers, my course will be helpful!

😵‍💫 It's hard to even look at the official documentation

I've been trying to learn Next.js version 13, but I still don't understand the official documentation. I'd appreciate it if someone could summarize the key points from the official documentation so we can study together.

📌 While the official documentation is certainly a valuable learning resource, its sheer volume can be overwhelming. Wouldn't it be more efficient and time-efficient to have an experienced instructor point out the areas you need to learn? This lecture summarizes key concepts based on the official Next.js documentation.

🤔 How should I actually write it?

I followed the official documentation, but it doesn't work as expected. I don't know what's wrong. I searched, but it's hard to find a good result, perhaps because Next.js 13 was released so recently.

📌 When following the code in the official documentation, you'll often encounter situations where it doesn't work as expected. I've been flustered a few times while preparing for this lecture. In this lecture, I'll share actual, working code.


What you'll gain from this course 💎

1. The perspective on technology is changing.

Like many technologies, I believe Next.js emerged to solve a problem. In this lecture, I want to convey the core concepts and explain what each tool means.

  • Understand how JavaScript frameworks have evolved to bring Next.js to the world.
  • You can see why Next.js is a worthwhile tool to learn as a problem-solving tool.

2. You will have study materials available to you at any time.

I believe a good lecture stays in your head for a long time. However, our memories are limited. I want to provide practical help by providing a handbook and source code that you can access whenever you need it.

  • We provide a handbook that summarizes only the core concepts from the official Next.js documentation.
  • We provide the source code for the project we created together in class.
  • We'll answer your questions as quickly as possible. As our enrollment grows, we'll be running a separate channel.

What will you learn? 📚

It consists of three sections in total.

Section 1.
Why learn Next.js?

Let's take a look at what happened before Next.js came into existence. We've prepared a time to understand the challenges that tools like jQuery, AngularJS, and React were trying to solve, starting with the emergence of JavaScript. Naturally, you'll learn the background that led to the emergence of Next.js!

Section 2
Learning the Basics of Next.js

We've distilled the essentials from the official Next.js documentation. You'll learn what Next.js is and what's new in Next.js 13. You'll understand the newly introduced server component, file system-based routing, data fetching, and metadata!

Section 3.
Getting familiar with Next.js

This is the process of putting what you learned in the previous chapter into actual code. By building a weather app, you'll be able to put concepts you've only ever had in your head into practice. You'll directly call the weather API and learn how to fetch, cache, and revalidate data, all while getting hands-on with Next.js!


Please note 📢

Let me introduce you to the practice environment and learning materials! I used a MacBook Air M1 with 8GB of memory .

Practice environment

  • Operating System and Environment: macOS, Node.js 18.17.0
  • Tools used: VSCode
  • Services used: Vercel , WeatherAPI , TimeAPI

Learning Materials

Before attending the lecture

  • I recommend that you first listen to the lectures that are available for free.
  • Watching the presentation on clean code given at Banksalad will also help you understand the lecture style.

Recommended for
these people

Who is this course right for?

  • For those who want to understand the main concepts of Next.js

  • For those who want to try out React's latest features

  • For those who are having trouble choosing a JavaScript framework

Need to know before starting?

  • HTML & CSS

  • JavaScript

  • React

  • TypeScript

Hello
This is

1,065

Learners

83

Reviews

47

Answers

4.8

Rating

3

Courses

마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.

 

"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.

Curriculum

All

22 lectures ∙ (1hr 54min)

Published: 
Last updated: 

Reviews

All

70 reviews

4.9

70 reviews

  • Peter Cha님의 프로필 이미지
    Peter Cha

    Reviews 8

    Average Rating 4.6

    5

    45% enrolled

    내가 Next.js를 배울 때 이 강의로 시작했으면 훨씬 덜 답답했을텐데..! 라는 생각이 계속 나는 강의입니다. 강사님의 외부 강연과 유튜브 영상 등을 통해 강사님을 이전부터 알고 있었는데 이렇게 강의를 내셨다고 해서 들어보게 됐어요. 강의를 들어보니 확실히 공식 문서를 제대로 읽지 않고, 일단 이렇게 하면 이런 기능이 된다!식의 실무 위주로만 배웠던 학습법의 단점들이 커버되는 느낌입니다. 마치 친절한 학교 선배가 옆에서 이야기 하듯이 설명을 해주는 느낌이라 듣기도 편했고, 'use client'면 CSR인줄 이때까지 알았는데 바로 아니라고 설명해주고 시작하는 부분에서 뭔가 사람들이 간과하기 쉬운 점들을 탄탄하게 채워가며 기본기를 잘 다질 수 있는 좋은 강의라는 느낌을 받습니다.

    • 밀크티님의 프로필 이미지
      밀크티

      Reviews 26

      Average Rating 4.8

      5

      91% enrolled

      1년미만 주니어 개발자입니다. 갑작스레 프리랜서 개발자로 일하게 되었는데. Next 13기반 프로젝트여서 이 강의만 보고 투입되었습니다. 에센셜하게 반드시 알아야 하는 부분들을 공식문서 토대로 잘 설명해주시고, 질문에 대한 두루뭉술한 대답이 아닌 명확하고 상세한 답변을 제공해주셔서 수강생에게 해주시는 답변들을 주르륵 보고있노라면, 강의의 별책부록을 보고있는 느낌이 들었습니다. 부족한 자신감을 지식으로 채울 수 있도록 성심성의껏 도와주고 계신다는 느낌을 받았기에. 답례로 드릴 것이라곤 보잘것 없는 이런 수강평뿐이네요. 수강과 연관된 평은 아니나. 혹시 여유되신다면 예비/주니어 개발자분들은 강사님의 블로그 포스팅을 한번 훑어보시면 좋겠습니다. 우리가 개발자로서 고민하는 안개같은 고민을 대신 모아서 적어 놓은 것 같기도하고, 읽다보면 어떤 개발자가 될지 생각에 빠지게 되기도 하며, 회사와 내가 서로를 선택하는 과정을 글을 통해 간접체험 할수 있습니다. 재밌고 읽다보면 감정이입이 되서 심오(?)해집니다. 글만 봐도 좋은 개발자이심이 보입니다. 네카라쿠배당토같은 타이틀만 보며 자책하던 스스로에게 큰 물음표를 던지게 해주셔서 정말 감사합니다. 스스로를 돌아볼 줄 알고 글을 통해 본인의 상황과 능력 등을 정의할 줄 아는 하조은님 같은 개발자가 되어야겠노라-. 하고 목표를 세웠네요. 좋은 스승님이십니다.

      • 오일님의 프로필 이미지
        오일

        Reviews 6

        Average Rating 4.3

        5

        45% enrolled

        리액트를 어느정도 아는사람이 듣기엔 이만한게 없네요 최고입니다. 쓸데없는 설명도없고 궁금한 부분만 쏙쏙 알려줘서 좋습니다.

        • jinho kim님의 프로필 이미지
          jinho kim

          Reviews 1

          Average Rating 5.0

          5

          32% enrolled

          next.js를 처음 배우면서 공식문서를 봐도 무슨 말인지 이해하기 힘들었는데 정말 핵심을 간략하게 잘 설명해주셔서 많은 도움이 된 것 같습니다~제가 인프런에서 여러 수업을 들었지만 댓글은 처음 남겨보는데요, 앞으로도 좋은 강의 많이 부탁드리겠습니다~

          • 공부하자님의 프로필 이미지
            공부하자

            Reviews 15

            Average Rating 4.9

            5

            73% enrolled

            너무 짧은거 아니야? 라고 해서 내용도 가벼울거라 생각했는데, Next.js 를 다는 아니지만 전반적으로 주요 기능을 살펴볼 수 있어서 좋았던 것 같습니다. 후속 강의도 있다고 하셔서 더 기대가 됩니다!

            Limited time deal ends in 01:31:36

            $18,970.00

            25%

            $19.80

            hajoeun's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!