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

/

Front-end

基礎から学ぶNext YTMusicクローンコーディング(with next.js 14、UIマスター)

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand で YoutubeMusic ウェブサイトをクローンします。 NextJS基礎からUI重点でWebフロント基礎をマスターすることができます。

  • dodocoding
실습 중심
클론코딩
Next.js
React
TailwindCSS
zustand
Clone Coding

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

こんなことが学べます

  • Next.js App Router

  • (理論) React Suspense ( Streaming, Progressive Hydration )

  • (理論)Next.jsレンダリング方式とCSR、SSR、Hydration

  • Next.js RSC、RCC、use client

  • TailwindCSS, RadixUI, Shadcn

  • YT Music Player CloneCoding

  • Zustand状態管理

  • Typescript タイピングの基礎

  • レスポンシブUIの開発方法

最近、FE開発者に求められるというNextJS技術スタック!
NextJS実務に必要な部分だけがぴったりですよ🍭

リアクトの勉強後、NextJSを公式文書だけで見てプロジェクトを進めるのは難しいです。
だからYoutubeMusic Cloneコーディングを介して迅速かつ簡単に、
たった一日で! NextJSをうまく使えるように講義をしました。
独自のNextJSプロジェクトを進行するとき、このレッスンはベストベースになることができます。

この講義の特徴

📌 講義手書きノートガイド各章ごとにGoal、復習ポイント、さらに学ぶ(公式文書、概念など)

📌 講義チェックポイント提供:コードをたどらなくても大丈夫です!チャプタースターブランチがあります。

📌理論10%実践90% :最も難しいレンダリング、サーバーコンポーネント、hydrationの概念について説明します。

📌 ポートフォリオ: クローンコーディングを通じて結果を得ることができます。

こんな方におすすめです

ReactからNextへ
拡張したい!

Reactは扱うと思いますが、
Nextで詰まったら、
この講義はぴったりです!

Next.jsプロジェクト
作りたい!

Next.jsに基づいて
すぐにプロジェクトをしなければならないなら、
良いアシスタントになります。

クローンコーディングで簡単
楽しく体得してください!

適切なコードベースに基づいて
独自のプロジェクトに拡張してみてください!

受講後は

  • どのサイトを見ても、Next.jsでクローンコーディングできます。 😲

  • Next.js AppRouterからプロジェクトを進めることができます。

  • Zustandでグローバル状態管理ができます。

  • さまざまな方法のレンダリングの理解とPageRouter、React CSR、SSR、Hydrationがわかります。

  • Vercelを通して私が作ったプロジェクトを他の人に見せることができます。

  • TailwindCSS + Radix UI + Shadcnの組み合わせにより、誰よりも迅速にUI開発が可能です。


こんな内容を学びます 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

アプリルーターでプロジェクト全体の構造を把握する方法を学びます。そして、いつサーバーコンポーネントを使用するのか、なぜサーバーコンポーネントが必要なのか理論を学びます。 FEレンダリング変遷史を通じてバニラJS > React > NextJS PageRouter > AppRouteの歴史を学びます。

レスポンシブデザイン+インタラクティブウェブ

モバイルおよびタブレット画面に対応できる戦略を紹介します。モバイル画面だけに見えるDrawerなどUI Componentやスタイリングでディテールを活かしました。今後のWebビューで包んでアプリを制作してみてはいかがでしょうか?

Music Player with Zustand

Zustandグローバルステータス管理ツールを使用してプレーヤーを学びます。ユーザーエクスペリエンスを向上させるためのディテールなUIスキルを盛り込んだ。 Zustandで任意のページで音楽を再生するようにイベントを連動します。

UI Components & Typescript

さまざまなUIをコンポーネントにまとめます。そして、必要に応じてタイプスクリプトを適用して、プロジェクトで発生するエラーを事前に防ぐ方法を学びます。

受講前の注意

練習環境

  • Node.js、VS Code、Githubを使用します。


学習資料

  • Githubとチャプター別CheckPoint: Link

  • 手書きノートとワークブックを提供! : Link

  • LiveDemo:Link

選手の知識と注意事項

  • 基本的なHTML、CSS、Reactの知識

  • TailwindCSSでスタイリングしています。 (+要約講義があります。😀

  • (*最初に私はTailwindCSSを嫌いました。しかし最初にランニングカーブ(1時間ほど)開発経験の向上と開発速度が圧倒的に速くなりました。!本当に後悔しないでしょう。)

知識共有者の
他の講義が気になったら?

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsでプロジェクトを開始したい方

  • Next.jsに基づいてパブリッシングをマスターしたい人

  • コンポーネントライブラリを通じて迅速に開発したい方

  • Next.jsテクノロジスタックを増やすFE開発者

前提知識、
必要でしょうか?

  • 基礎レベルのHTML、CSS、React

こんにちは
です。

3,663

受講生

145

受講レビュー

85

回答

4.8

講座評価

5

講座

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

カリキュラム

全体

80件 ∙ (7時間 6分)

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

受講レビュー

全体

36件

4.4

36件の受講レビュー

  • kotlinjava님의 프로필 이미지
    kotlinjava

    受講レビュー 20

    平均評価 5.0

    5

    100% 受講後に作成

    There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      受講レビュー 2

      平均評価 4.0

      3

      100% 受講後に作成

      It was so good, but the ending was a bit abrupt, so it was a little disappointing.

      • dodocoding
        知識共有者

        Thank you for taking the class. ~ I should have delivered it in a more systematic way, but I will see you again with a better class.

    • smc91191589님의 프로필 이미지
      smc91191589

      受講レビュー 13

      平均評価 5.0

      5

      100% 受講後に作成

      I think this is the best of the nextjs lectures~ I listened to the good lectures~

      • dodocoding
        知識共有者

        Thank you 100% for taking the class! I will come back with a more upgraded lecture later. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      受講レビュー 2

      平均評価 5.0

      5

      11% 受講後に作成

      • sthwin님의 프로필 이미지
        sthwin

        受講レビュー 11

        平均評価 4.4

        3

        100% 受講後に作成

        I took the lecture to review React and Tailwind CSS. There were some parts where I felt like the explanation was a bit lacking, but I can't really say anything. There were also parts where I thought it would be better to just unify it with TypeScript. Still, it was very helpful while cloning.

        • dodocoding
          知識共有者

          Thank you for your review! I will come back with a better lecture next time. Thank you for listening to the lecture, which was lacking. If you have any questions in the future, I will answer them to the end.

      ¥5,556

      dodocodingの他の講座

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

      似ている講座

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