Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

手につくNext.js - 移行

ReactからNext.js 14に移行し、ReactとNext.jsの違いを学びます。 Next.jsをより深く理解することができます!

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

学習した受講者のレビュー

こんなことが学べます

  • 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.jstsconfig.json.eslintrc.jsonpackage.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,053

受講生

80

受講レビュー

45

回答

4.8

講座評価

3

講座

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

 

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

カリキュラム

全体

32件 ∙ (1時間 43分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

5件

4.4

5件の受講レビュー

  • qkdwogns988090님의 프로필 이미지
    qkdwogns988090

    受講レビュー 7

    平均評価 4.4

    5

    100% 受講後に作成

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

    • skgyaos35481님의 프로필 이미지
      skgyaos35481

      受講レビュー 2

      平均評価 5.0

      5

      91% 受講後に作成

      Part 2 is also really good. Fighting!

      • dohyun0505님의 프로필 이미지
        dohyun0505

        受講レビュー 34

        平均評価 4.9

        5

        100% 受講後に作成

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

        • khy21062423님의 프로필 이미지
          khy21062423

          受講レビュー 2

          平均評価 5.0

          5

          100% 受講後に作成

          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

            受講レビュー 10

            平均評価 4.7

            2

            31% 受講後に作成

            It seems expensive for the amount.

            ¥3,364

            hajoeunの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!