강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

Next.js 시작하기

React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

(4.8) 수강평 97개

수강생 744명

next
캡틴판교
Next.jsReactJavaScript

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • Next.js 14(최신 버전)

  • Next.js 실무 프로젝트 폴더 구조

  • Next와 React 컴포넌트 설계

  • Next.js 실무 코딩 팁

  • React

  • JavaScript

  • NPM

  • REST API

  • 네트워크와 HTTP 프로토콜

  • 성능 최적화

Next.js를 많이 쓰던데 어떻게 배워야 할까요? 🤔

React 프로젝트를 시작하기 위해 거의 0순위로 선택되는 Next.js 프레임워크. React도 아직 잘 모르겠는데 Next.js는 어떻게 배우면 좋을까요?

개발 방식이 자유로운 React에 규칙을 더하고, 개발자들이 챙겨야 하는 라우팅과 성능 등을 알아서 챙겨주는 Next.js 프레임워크. 방대한 Next.js 공식 문서 앞에 혼자서 길을 잃을 필요가 없습니다. Next.js 공식 문서보다 이해하기 쉬운 한글 교안이 있으니까요. ❤


수년 간 입문자의 관점에서 어려운 기술들을 쉽게 설명해 온 캡틴판교가 이번엔 Next.js를 뽀개드립니다. 입문자를 배려한 쉬운 용어 설명과 눈으로 직접 보여주는 동작 원리부터 실무자를 사로 잡는 렌더링, 네트워크, 성능, 하이드레이션 등 실무 개념 설명까지. Next.js 시작하기 강의가 여러분을 도와드립니다.

이 강의의 특징

📌 REST API를 연동하여 쇼핑몰 사이트를 만들면서 Next의 기초 개념부터 고급 개념까지 모두 체득합니다.

📌 짧은 시간 안에 코드를 빠르고 정확하게 작성하는 11년차 프런트엔드 개발자의 꿀팁 대방출

📌 크롬 개발자 도구, HTTP 프로토콜, 성능 최적화 등 실전에서 꼭 알아야 하는 지식들도 같이 알려드립니다

📌 중간 중간 배운 내용을 소화할 수 있는 실습이 곳곳에 배치되어 있습니다.

📌 CSR, SSR, Hydration, 클라이언트 네비게이션 등의 모든 개념은 브라우저를 직접 까서 같이 눈으로 보고 이해해요.

📌 언제 어디서나 쉽게 접근할 수 있는 웹 사이트 기반 강의 교안이 제공됩니다.

이런 분들께 추천해요

Next.js 프로젝트를 시작해요.

React도 잘 모르는데 Next.js로 회사 프로젝트를 해야 돼요.
개발을 쉽게 하려면 어떤 개념들과 기술을 알아야 하나요?

React로 취업을 준비하고 있어요.
채용 공고마다 자격 요건에
Next.js가 들어가 있는데
회사에서 실제로 요구하는 역량이 무엇인가요?

잘하는 프런트엔드 개발자는
어떻게 일하는지 궁금해요
네카라쿠배에서 인정받는 개발자는 어떤 역량을 갖추고 있을까요?
숙련된 실무자가 알고 있는 지식과 노하우가 궁금합니다.

수강 후에는

  • Next.js로 웹 애플리케이션을 구현하는게 쉬워집니다.

  • 코드를 더 정확하고 빠르게 작성하는 스킬이 생깁니다.

  • 클라이언트 레벨의 지식 뿐만 아니라 서버, 네트워크, 성능 최적화에 대해서도 알게 됩니다.

  • 실무에서 프로젝트 생성부터 폴더 구조화 등의 전반적인 컨벤션까지 자신감 있게 주도할 수 있어요.

이런 내용을 배워요.

실무 프로젝트 폴더 구조와 실무 개발 환경 설정 방법

Next.js의 기본 개념에 기반한 폴더 구조 설계 방법과 ESLint, Prettier를 이용해 코드 타이핑을 줄이고 개발 생산성을 줄이는 방법을 배워봅니다.

React + Next.js의 필수 개념과 문법들

작성한 코드의 흐름을 정확히 이해할 수 있게 친절하고 구체적인 도식으로 설명합니다. CSR, SSR, Hydration 뿐만 아니라 React, JavaScript 필수 문법까지 모두 설명해 주는 혜자 강의 🎁

네트워크, HTTP, 성능 최적화에 대한 깊은 이해

웹 페이지가 그려지기까지의 리소스 요청과 렌더링 과정에 대해 눈으로 직접 보여드리면서 설명합니다. 서버, CDN, HTTP, 성능 최적화 등 입문자 관점에서 낯선 용어는 모두 풀어서 설명해 드려요

코드를 짧은 시간에 빠르고 정확하게 작성하는 방법과 숙련된 실무자의 단축키 꿀팁

실무자의 중요한 스킬 중 하나인 코딩 실력과 구현 역량. 짧은 시간 안에 많은 기능을 정확하고 빠르게 구현할수 있는 단축키와 코딩 꿀팁을 대방출합니다 🚀

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰


수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): 강의에서 Mac을 쓰지만 Windows 관련 단축키도 모두 설명합니다.

  • 사용 도구: VSCode

학습 자료

  • 언제든지 편하게 볼 수 있는 웹 사이트 교안이 제공됩니다 😄

  • 소스 코드를 확인할 수 있는 깃헙 리포지토리도 제공돼요 📘

  • 보면서 더 많은 지식을 채울 수 있는 무료 교육 영상과 자료도 다수 제공됩니다 ❤

선수 지식 및 유의사항

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Next.js를 시작하는 입문자

  • React와 Next.js를 한번에 배우고 싶은 입문자

  • Next.js 실무 개발이 궁금한 프런트엔드 개발자

  • Next.js에 관심 있는 웹 개발자

선수 지식,
필요할까요?

  • React 기본 문법(위 선수 지식에 안내된 강의를 듣고 오시는 걸 추천드려요)

  • JavaScript 기본 문법

안녕하세요
입니다.

48,272

수강생

4,709

수강평

3,813

답변

4.9

강의 평점

17

강의

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

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

커리큘럼

전체

70개 ∙ (7시간 57분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

97개

4.8

97개의 수강평

  • minkyungs2님의 프로필 이미지
    minkyungs2

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    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
      지식공유자

      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

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    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
      지식공유자

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

  • iamjjoal5302님의 프로필 이미지
    iamjjoal5302

    수강평 9

    평균 평점 5.0

    5

    100% 수강 후 작성

    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

      수강평 2

      평균 평점 5.0

      5

      84% 수강 후 작성

      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

        수강평 14

        평균 평점 3.2

        4

        100% 수강 후 작성

        ₩55,000

        장기효(캡틴판교)님의 다른 강의

        지식공유자님의 다른 강의를 만나보세요!

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!