인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

손에 익는 Next.js - 마이그레이션하기

React에서 Next.js 14로 마이그레이션하며 React와 Next.js의 차이점을 익혀봅니다. Next.js을 보다 깊게 이해하실 수 있어요!

Thumbnail

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • React로 시작한 서비스를 Next.js로 바꾸기

  • React Router를 App Router로 바꾸기

  • Next.js 14의 설정(Config) 이해하기

React.js에서 Next.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의 차이를 이해하실 수 있어요.


무엇을 배우게 되나요?

1. Next.js 설정 읽어보기

Next.js 앱의 기본 설정에 포함된 next.config.js, tsconfig.json, .eslintrc.json, package.json 파일을 읽어봅니다. 마이그레이션에 필요한 설정을 이해하고 Next.js에 대한 깊이를 더할 수 있어요.

다양한 설정을 함께 읽어봐요

2. Vite에서 마이그레이션하기

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

Vite로 시작해서 Next.js로

3. Create React App에서 마이그레이션하기

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

CRA로 시작해서 Next.js로

4. React Router에서 마이그레이션하기

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

React Router를 App Router로

수강 전 참고 사항

실습 환경

  • 운영 체제 및 환경: macOS, Node.js 20.10.0

  • 사용 도구: VSCode

  • 사용 서비스: Vercel, FakeStoreAPI

학습 자료

이 강의를 듣기 전에

연관 강의

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 첫 번째 마이그레이션 프로젝트를 앞둔 분들

  • React를 Next.js로 마이그레이션하고 싶은 분들

  • React와 Next.js의 차이점을 이해하고 싶은 분들

선수 지식,
필요할까요?

  • React

  • TypeScript

안녕하세요
하조은입니다.

1,042

수강생

80

수강평

45

답변

4.8

강의 평점

3

강의

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

 

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

커리큘럼

전체

32개 ∙ (1시간 43분)

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

수강평

전체

5개

4.4

5개의 수강평

  • jack님의 프로필 이미지
    jack

    수강평 5

    평균 평점 5.0

    5

    100% 수강 후 작성

    정말 이해가 잘되는 강의에요. 2부도 역시 감사합니다 !!

    • 스타현이님의 프로필 이미지
      스타현이

      수강평 33

      평균 평점 4.9

      5

      100% 수강 후 작성

      Next.js의 은총알이 되는 강의입니다. 덕분에 많이 배웠어요!

      • 헤욤이님의 프로필 이미지
        헤욤이

        수강평 2

        평균 평점 5.0

        5

        100% 수강 후 작성

        처음에는 '1탄 들었으니 2탄도 함 들어 봐야지~'라는 생각으로 가볍게 수강을 시작했습니다. 그런데 듣다 보니, 제가 만든 리액트 프로젝트도 넥스트로 꼭 마이그레이션 해 보고 싶다는 생각이 들었습니다ㅎㅎ 개발 라이프에 활력을 더해주는 좋은 강의였습니다!

        • 정효성님의 프로필 이미지
          정효성

          수강평 2

          평균 평점 5.0

          5

          91% 수강 후 작성

          2부도 정말 좋네요 화이팅입니다!

          • 코딩의성님의 프로필 이미지
            코딩의성

            수강평 9

            평균 평점 4.7

            2

            31% 수강 후 작성

            분량에 비해 가격이 비싼것 같습니다 ㅜ

            비슷한 강의

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

            연관 로드맵

            강의가 포함된 로드맵으로 학습해 보세요!

            ₩27,500