강의

멘토링

로드맵

Programming

/

Front-end

Getting Familiar with Next.js - Migrating

Learn the differences between React and Next.js by migrating from React to Next.js 14. You will gain a deeper understanding of Next.js!

(4.4) 5 reviews

149 learners

  • hajoeun
3시간 만에 완강할 수 있는 강의 ⏰
마이그레이션
nextjs
Next.js
React
vitejs

Reviews from Early Learners

What you will learn!

  • Converting a service started with React to Next.js

  • Replacing React Router with App Router

  • Understanding the Config in Next.js 14

Migrating from React.js to Next.js,
You can do it too!

Learning Next.js by Comparing

Running a service with React often requires migrating to Next.js. While migration can be complex and challenging, it also provides an opportunity to gain a deeper understanding of your service. This lecture, taking the form of migration, will provide an opportunity to learn new skills by comparing React and Next.js. #React, #Next.js, #next.js, #next, #vitejs

What you will get from this course

  • You will be able to understand the default settings used in Next.js, as well as TypeScript settings and ESLint settings.

  • Create React App allows you to migrate React apps created with Vite to Next.js.


  • You will understand the differences between React and Next.js during the migration process.


What will you learn?

1. Read the Next.js settings

Read next.config.js , tsconfig.json , .eslintrc.json , and package.json files included in the default settings of a Next.js app. This will help you understand the settings required for migration and deepen your understanding of Next.js.

Let's read the various settings together

2. Migrating from Vite

Migrate a React app built with Vite to Next.js by following the guide in the official Next.js documentation. This will help you understand the configuration differences between Vite and Next.js, as well as the differences between React and Next.js.

Starting with Vite and moving on to Next.js

3. Migrate from Create React App

We'll migrate a React app created with CRA (create-react-app), a tool used when first getting started with React, to Next.js. We'll also explore differences from apps created with Vite, helping you gain a deeper understanding of React and Next.js.

Starting with CRA and moving on to Next.js

4. Migrating from React Router

Let's replace React Router, the most widely used React routing library, with App Router. You'll understand the differences in routing methods and gain hands-on experience with Next.js' file system-based routing, server components, and client components.

React Router to App Router

Things to note before taking the course

Practice environment

  • Operating System and Environment: macOS, Node.js 20.10.0

  • Tools used: VSCode

  • Services used: Vercel , FakeStoreAPI

Learning Materials

Before taking this lecture

Related lectures

Recommended for
these people

Who is this course right for?

  • For those of you who are about to embark on your first migration project

  • For those who want to migrate React to Next.js

  • For those who want to understand the differences between React and Next.js

Need to know before starting?

  • React

  • TypeScript

Hello
This is

1,061

Learners

82

Reviews

47

Answers

4.9

Rating

3

Courses

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

 

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

Curriculum

All

32 lectures ∙ (1hr 43min)

Published: 
Last updated: 

Reviews

All

5 reviews

4.4

5 reviews

  • qkdwogns988090님의 프로필 이미지
    qkdwogns988090

    Reviews 7

    Average Rating 4.4

    5

    100% enrolled

    This is a really easy to understand lecture. Thank you for the second part as well!!

    • skgyaos35481님의 프로필 이미지
      skgyaos35481

      Reviews 2

      Average Rating 5.0

      5

      91% enrolled

      Part 2 is also really good. Fighting!

      • dohyun0505님의 프로필 이미지
        dohyun0505

        Reviews 35

        Average Rating 4.9

        5

        100% enrolled

        This is a silver bullet lecture for Next.js. I learned a lot thanks to it!

        • khy21062423님의 프로필 이미지
          khy21062423

          Reviews 2

          Average Rating 5.0

          5

          100% enrolled

          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!

          • codingcastle님의 프로필 이미지
            codingcastle

            Reviews 10

            Average Rating 4.7

            2

            31% enrolled

            It seems expensive for the amount.

            $22.00

            hajoeun's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!