inflearn logo
inflearn logo

手につくNext.js - 移行

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

難易度 初級

受講期間 無制限

Next.js
Next.js
React
React
vitejs
vitejs
Next.js
Next.js
React
React
vitejs
vitejs
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

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

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

4.4

5.0

jack

100% 受講後に作成

本当に理解しやすい講義です。パート2もありがとうございます!

5.0

정효성

91% 受講後に作成

2部も本当にいいですねファイティングです!

5.0

스타현이

100% 受講後に作成

Next.jsの恩寵となる講義です。おかげでたくさん学びました!

受講後に得られること

  • 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

こんにちは
hajoeunです。

1,073

受講生

83

受講レビュー

47

回答

4.8

講座評価

3

講座

Marpple、BankSaladを経て、現在は当根(Karrot)でフロントエンドエンジニアとして働いています。

「あなたが必要だ」、「あなたの存在が私の力になる」という言葉が好きです。隣人のニーズを満たし、力になること、それが愛だと信じています。良い講義を通じて皆さんのニーズを満たし、力になれるよう努めてまいります。

もっと見る

カリキュラム

全体

32件 ∙ (1時間 43分)

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

受講レビュー

全体

5件

4.4

5件の受講レビュー

  • qkdwogns988090님의 프로필 이미지
    qkdwogns988090

    受講レビュー 7

    平均評価 4.4

    5

    100% 受講後に作成

    本当に理解しやすい講義です。パート2もありがとうございます!

    • skgyaos35481님의 프로필 이미지
      skgyaos35481

      受講レビュー 2

      平均評価 5.0

      5

      91% 受講後に作成

      2部も本当にいいですねファイティングです!

      • khy21062423님의 프로필 이미지
        khy21062423

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

        最初は'1弾聞いたので2弾も艦に聞いてみるべきだよ~'という考えで軽く受講を始めました。さて聞いてみると、私が作ったリアクトプロジェクトもネクストでぜひマイグレーションしてみたいという気がしましたㅎㅎ開発ライフに活力を加えてくれる良い講義でした!

        • dohyun0505님의 프로필 이미지
          dohyun0505

          受講レビュー 36

          平均評価 4.9

          5

          100% 受講後に作成

          Next.jsの恩寵となる講義です。おかげでたくさん学びました!

          • codingcastle님의 프로필 이미지
            codingcastle

            受講レビュー 10

            平均評価 4.7

            2

            31% 受講後に作成

            分量に比べて高価なようですㅜ

            似ている講座

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

            ¥3,497