
Getting Started with Next.js - A Quick Look at the Official Documentation
hajoeun
Learn the latest Next.js with the official documentation. Understand why Next.js is needed as a problem-solving tool!
초급
Next.js, next.js13, React
React에서 Next.js 14로 마이그레이션하며 React와 Next.js의 차이점을 익혀봅니다. Next.js을 보다 깊게 이해하실 수 있어요!


React로 시작한 서비스를 Next.js로 바꾸기
React Router를 App Router로 바꾸기
Next.js 14의 설정(Config) 이해하기
React.js에서 Next.js로 마이그레이션,
여러분도 할 수 있어요!
React로 서비스를 운영하다 보면 Next.js로 마이그레이션 해야 할 일이 생기기도 합니다. 마이그레이션은 복잡하고 어려운 일이지만 그 과정에서 서비스를 더욱 깊게 이해할 수 있는 기회가 되기도 하죠. 이번 강의 역시 마이그레이션이라는 형식을 취해 React와 Next.js를 비교하며 새로운 지식을 배울 수 있는 기회로 삼으려고 합니다. #React, #Next.js, #next.js, #next, #vitejs
Next.js에서 사용하는 기본 설정을 비롯해 TypeScript 설정, ESLint 설정을 이해할 수 있어요.
Create React App, Vite로 만든 React 앱을 Next.js로 마이그레이션 할 수 있어요.
마이그레이션 과정에서 React와 Next.js의 차이를 이해하실 수 있어요.
Next.js 앱의 기본 설정에 포함된 next.config.js, tsconfig.json, .eslintrc.json, package.json 파일을 읽어봅니다. 마이그레이션에 필요한 설정을 이해하고 Next.js에 대한 깊이를 더할 수 있어요.

다양한 설정을 함께 읽어봐요
Next.js 공식 문서에 소개된 가이드에 따라 Vite로 만든 React 앱을 Next.js로 마이그레이션합니다. Vite와 Next.js의 설정 차이를 이해하고 React와 Next.js의 차이점을 이해할 수 있어요.

Vite로 시작해서 Next.js로
React를 처음 시작할 때 사용하는 도구인 CRA(create-react-app)으로 만든 React 앱을 Next.js로 마이그레이션합니다. Vite로 만든 앱과 다른 점도 살펴보면서 React, Next.js를 보다 다양하게 이해할 수 있어요.

CRA로 시작해서 Next.js로
React 라우팅 라이브러리 중에 가장 많이 사용되는 React Router를 App Router로 바꿔봅니다. 라우팅 방식의 차이를 이해하고 Next.js 파일 시스템 기반 라우팅, 서버 컴포넌트, 클라이언트 컴포넌트를 손에 익힐 수 있어요.

React Router를 App Router로
운영 체제 및 환경: macOS, Node.js 20.10.0
사용 도구: VSCode
사용 서비스: Vercel, FakeStoreAPI
피드백을 받고 꾸준히 업데이트되는 핸드북
마이그레이션 통해 Next.js 14로 전환한 세가지 예제 소스 코드
Next.js가 처음이시라면
Next.js 공식 문서 훑어보기 강의를 먼저 들어보시길 권해요!
무료로 공개된 강의를 들어보시고 결정해주세요.
학습 대상은
누구일까요?
첫 번째 마이그레이션 프로젝트를 앞둔 분들
React를 Next.js로 마이그레이션하고 싶은 분들
React와 Next.js의 차이점을 이해하고 싶은 분들
선수 지식,
필요할까요?
React
TypeScript
1,065
명
수강생
83
개
수강평
47
개
답변
4.8
점
강의 평점
3
개
강의
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
전체
32개 ∙ (1시간 43분)
1. 강의 및 강사 소개
05:33
2. Next.js가 필요한 순간
03:45
6. package.json 읽어보기
01:47
7. 폴더 구조 살펴보기
01:53
8. 예제 및 공통 환경 설정
01:40
23. 예제 확인하기
02:15
30. Image 컴포넌트 사용하기
03:04
31. 배포 환경 변경하기
04:19
32. 마치며
02:30
전체
5개
4.4
5개의 수강평
수강평 7
∙
평균 평점 4.4
수강평 2
∙
평균 평점 5.0
수강평 35
∙
평균 평점 4.9
수강평 2
∙
평균 평점 5.0
5
At first, I started taking the course lightly, thinking, "I've listened to the first part, so I should listen to the second part too." But as I listened, I realized that I definitely want to migrate the React project I created to NeXT. It was a great course that added vitality to my development life!
수강평 10
∙
평균 평점 4.7
₩27,500