
SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)
dodocoding
FirebaseのSQL版!Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます!
初級
Next.js, supabase, React
React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand で YoutubeMusic ウェブサイトをクローンします。 NextJS基礎からUI重点でWebフロント基礎をマスターすることができます。
受講生 456名
難易度 初級
受講期間 無制限


学習した受講者のレビュー
5.0
김형진
Next.jsとTailwindCSS、Shadcnを活用してレスポンシブコンポーネントの実装を実習できて、とても役に立ちました。
5.0
코틀린자바
Next.jsでのキャッシュ処理や最適化のようなパフォーマンス関連の内容は多いですが、個人的にはUIの勉強が必要でした。HTMLやCSSの講座を受ける気にはなれなかったのですが、この講座があったので受講しました。先生のレベルが段違いですね。笑 でも、言われた通りにコードを書いているうちに身についたのか、実力が上がったように感じました。shadcnやTailwind CSSを学ぶのに最適でした。パート2が出るのを楽しみにしています。
5.0
Moon
nextjs講義の中で最高だと思います〜 良い講義はよく聞きました〜
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を使用します。
基本的なHTML、CSS、Reactの知識
TailwindCSSでスタイリングしています。 (+要約講義があります。😀 )
(*最初に私はTailwindCSSを嫌いました。しかし最初にランニングカーブ(1時間ほど)開発経験の向上と開発速度が圧倒的に速くなりました。!本当に後悔しないでしょう。)
学習対象は
誰でしょう?
Next.jsでプロジェクトを開始したい方
Next.jsに基づいてパブリッシングをマスターしたい人
コンポーネントライブラリを通じて迅速に開発したい方
Next.jsテクノロジスタックを増やすFE開発者
前提知識、
必要でしょうか?
基礎レベルのHTML、CSS、React
4,324
受講生
194
受講レビュー
94
回答
4.8
講座評価
5
講座
フロントエンド開発者として、ネカラクベ(NAVER・Kakaotalk・LINE・Coupang・Baemin)のいずれかのITサービス企業に在籍しています。 😀
🚀 SWマエストロ Expert 就職メンタリング
🚀 Naver Boostcamp BE メンター経験
🚀 FE 7Code ロードマップ講義制作
全体
80件 ∙ (7時間 6分)
全体
39件
4.5
39件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
5
内容はとても良いです。ただテンポが速くてnext ある程度知って聞かなければ理解できますよ。
受講評ありがとうございます。 next.jsに関連する内容や難しい内容がありましたら、たくさん質問してください。講義内容の伝達が足りない部分があるかもしれないので、気をつけて回答させていただきます。
受講レビュー 23
∙
平均評価 5.0
受講レビュー 13
∙
平均評価 5.0
5
nextjs講義の中で最高だと思います〜 良い講義はよく聞きました〜
100%受講ありがとうございます。よりアップグレードされたレッスンで今後探してみましょう。 ~~
受講レビュー 22
∙
平均評価 5.0
5
Next.jsとTailwindCSS、Shadcnを活用してレスポンシブコンポーネントの実装を実習できて、とても役に立ちました。
受講ありがとうございます。より良い講義でお会いしましょう。!!
受講レビュー 3
∙
平均評価 5.0
5
フロントエンドでもバックエンドでもどちらの道を確実にとらえて専門性を育てなければならないという考えが入って受講申請することになった現業ジュニアです。 会社でプロジェクトをしてみるとリアクトはまったく扱うことがなくて私がフロントと合うかどうかさえ分からなかったのに 講義が説明もわかりやすく、講義が短く短くなっていて余裕を持っていたのに1ヶ月で終わりましたね! 講義がとても面白く聞こえていて、講師が作った部分でこれ、それの口当たりに合わせて変えてみるのもとても楽しかったです。 今後完成したクローンサイトを元に肉をたくさんつけてポートフォリオ製作し、じっくりとフロントエンドの転向準備をしてみようと思います。 ありがとうございます~~~
100%受講後ありがとうございます。 ~講義が多少乱雑だったかもしれません。最後までよく聞いてくれてありがとう。この講義を通して十分に練習をしていただければ、今後UIを作ることは誰よりも早く可能になると思います。
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!