![[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)강의 썸네일](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?w=420)
[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)
lopun
フルスタック開発に翼を授けるSupabase! 3つのクローンプロジェクトを通じて、Next.js 14とSupabaseで実務レベルのフルスタック開発を行う方法を最速で学びます。
초급
Next.js, supabase, TailwindCSS
情報の洪水の中でどこから始めなければならないのかどうか?明確で簡潔なこのレッスンでNext.jsフルスタックWeb開発の第一歩を始めましょう!


Next.js(ネクストジェイエス)
フルスタックWeb開発
フロントエンド開発
リアクト(React)開発
1. Next.jsの基本構造と原則:Next.jsプロジェクトの構造、ルーティングシステム、コンポーネントモデルの理解
2.サーバーサイドレンダリング(SSR)と静的サイト生成(SSG) :Next.jsのサーバーサイドレンダリングと静的サイト生成の概念と実装方法
3.データフェッチとAPIルーティング:Next.jsを使用したさまざまなデータフェッチ方法とAPIルーティングの実践
4.スタイリングとデザインシステム:CSS-in-JS、TailwindCSSを活用した現代的なUI構築方法
5. Prismaを使用したデータベースの管理:ORMツールであるPrismaを活用してデータベーススキーマを設計し、CRUDタスクを実行する方法
6. Authjsによるユーザー認証:Authjsを使用してさまざまな認証方法(Google OAuth、メール/パスワード認証など)を実装する方法
7.実践プロジェクトの構築: Next.jsを含むいくつかのツールを使用して実際のプロジェクトを構築し適用する実践的な経験
最適化戦略:ページの読み込み時間の短縮、SEO、画像と資産の最適化、コードの分割と遅延のロードなどを含む
次へ
最新のWeb開発トレンドへ
足を合わせたい人
React開発者への
拡張したい方
フロントエンドとバックエンドの経験
全て揃えたい方
Next.jsのコアコンセプトと機能に精通しています。
現代のWebアプリを設計し構築するために必要なスキルを習得します。
実際のプロジェクトにNext.jsを効果的に適用できるようになります。
開発者としての旅を歩み、私はコードとソースの多様性の中で絶えず学びました。しかし、時には情報の海で方向を失うこともありました。これらの経験は私に重要な悟りを与えました。まさに、多くの情報の中でコアを把握し、それを明確に伝えることの重要性です。
私は、各トピックの中核を抽出し、簡潔で明確に伝えることに大きな喜びを感じます。この講義を通して、学習者が開発の核心を明確に理解し、自分自身の中心を見つけるのに役立つことを願っています。一緒に学び成長する過程で皆さんとコミュニケーションをとり、この分野への私の情熱を分かち合おうと思います。
各セクションは前のセクションに基づいて構築され、講義シリーズの終わりまでNext.jsとその生態系の包括的な理解を提供するように設計されています。
サーバーサイドレンダリングリアクトアプリケーションを構築するための強力なフレームワークであるNext.jsの核心を理解してください。このセクションでは、基礎についての徹底的な理解に基づいて、より高度なトピックに進むための基礎を提供します。
主な特長:
プロジェクト構造:効率的な開発のためのNext.jsプロジェクトの標準構造を学びます。
ルーティングとナビゲーション:組み込みのルーティングシステムとダイナミックルートを理解します。
クライアントとサーバーのコンポーネント: クライアント側とサーバー側のコンポーネントの違いと対話を探ります。
データフェッチ:Next.jsアプリケーションからデータをインポートするさまざまな戦略をマスターします。
キャッシュ: データキャッシュによるパフォーマンス最適化手法を発見します。
静的および動的レンダリング:静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)を比較して実装します。
Next.jsでスタイリングの秘密を探るこのセクションでは、現代のCSSフレームワークを使用して視覚的に魅力的でレスポンシブなデザインを作成することに焦点を当てています。
主な特長:
グローバルスタイル:Next.jsアプリケーション全体に普遍的なスタイルを適用する方法を学びます。
TailwindCSS :ユーティリティ中心のスタイリングのためにTailwindCSSを練習します。
DaisyUI : TailwindCSS プラグインである DaisyUI を使用してコンポーネントベースのデザインを実装します。
Next.jsでは、ルーティングとナビゲーションの高度な側面を深くカバーしています。この包括的なセクションでは、基本的なルーティングからエレガントなエラー処理まで、すべてを網羅しています。
主な特長:
動的経路とセグメント: 動的経路とすべてのセグメントを実装および管理します。
クエリ文字列パラメータ:クエリ文字列を使用して動的コンテンツを提供します。
レイアウトとナビゲーション:効果的なレイアウトを設計し、ナビゲーションパターンを理解します。
プログラマティック・ナビゲーション: 複雑なシナリオのために、コードによるナビゲーションの制御方法を学びます。
ロード UI とエラーの処理: ロード インターフェイスを作成し、「見つからない」と予期しないエラーをエレガントに処理する方法を学びます。
Next.jsエコシステム内でAPIを構築および管理する方法を学びます。このセクションでは、Zod を使用した検証を含む、生成、更新、および管理コレクションについて説明します。
主な特長:
CRUD アクション: 作成、読み取り、更新、削除のコレクションの全体的なサイクルを理解します。
Zod : スキーマ定義とデータ検証にZodを使用します。
現代的な開発のためのORMであるPrismaを使用して、Next.jsでCRUD作業を集中的にカバーします。
主な特長:
Prismaを使用したCRUD :Prismaを使用して作成、読み取り、更新、および削除操作を実行し、それをNext.jsアプリケーションとシームレスに統合します。
Cloudinary を統合して、イメージ管理に焦点を当てたファイルアップロードを実装する方法を学びます。
主な特長:
Cloudinaryの統合:画像とビデオを管理するためのクラウドベースのサービスであるCloudinaryを使用してファイルのアップロードをマスターします。
Next.jsで認証の複雑さを調べます。このセクションでは、Authjsを使用してさまざまな認証戦略を実装する方法について説明します。
主な特長:
Authjs 設定: ユーザー認証のために Authjs を実装します。
Googleプロバイダと資格情報:Google OAuthと他の資格情報ベースの認証方法を統合します。
データベース・アダプター: ユーザー・データを保管するためにデータベース・アダプターを使用する方法を学びます。
Vercelを使用してアプリケーションをデプロイする方法を学びながら、Next.jsの旅を完了します。 Vercelは静的サイトとサーバーレス機能のためのクラウドプラットフォームです。
主な特長:
Vercelを使用したデプロイ: Next.jsアプリケーションをVercelにデプロイするプロセスを理解し、ベストプラクティスと一般的なトラップについて学びます。
Next.js講義はどのレベルの開発者を対象としていますか?
このレッスンは、基本的なWeb開発知識を持つ初級から中級レベルの開発者を対象としています。基本的なHTML、CSS、JavaScript、Reactの理解があれば、この講義でより深い知識を得ることができます。
レッスンで扱う主なNext.js機能にはどのようなものが含まれていますか?
レッスンでは、Next.jsの基本構造、サーバーサイドレンダリング(SSR)、静的サイト生成(SSG)、APIルーティング、データフェッチなど、さまざまな高度な機能について説明します。これにより、実際のWebアプリケーション開発に必要な包括的な知識を習得できます。
PrismaとAuthjsの内容はどれくらい扱われますか?
Prismaを使用したデータベース管理とCRUD操作、Authjs(NextAuth)を介したさまざまな認証方法の実装についての実践的な内容について説明します。実際のプロジェクトで適用可能なレベルまで、練習と例で学ぶことができます。
講義に含まれる実践プロジェクトにはどんなものがありますか?
講義では様々な実践プロジェクトを提供し、学習した理論を実際に適用する機会を提供します。これらのプロジェクトは実際の市場での要求を反映しており、講義を通じて学んだ内容を直接実装することができます。今後のプロジェクト講義を通じて、これまでに学習したすべてのNext.jsの概念を実際に適用していく予定です。
講義を通じて得られる技術的な能力に加えて、追加の利点は何ですか?
この講義を通じて、最新のWeb開発トレンドと技術を習得することで、現在のWeb開発市場で必要な技術的能力を強化することができます。これは、雇用市場での競争力を向上させ、個人のポートフォリオを強化するのに非常に役立ちます。
オペレーティングシステムとバージョン(OS):Windows(10、11)、Node.js v16以降
使用ツール:VSCode
使用サービス: Next.js、MySQL、Prisma、authjs(nextauth)、JSONPlaceholder
授業資料をまとめたPDFを提供します。
質問にできるだけ早くお答えします!
プレーヤーの知識にはHTML / CSS、React、JavaScript / TypeScriptの知識が必要です。
学習対象は
誰でしょう?
Reactの基礎を理解した開発者の方々
フロントエンド開発者として成長したい人
フルスタック開発に興味のある方
パフォーマンスと生産性の向上を追求する開発者
就職やフリーランサーで競争力を備えたい方
技術スタックを近代化したい企業開発チーム
前提知識、
必要でしょうか?
HTML& CSS
JavaScript
React
TypeScript
全体
68件 ∙ (2時間 52分)
講座資料(こうぎしりょう):
同じ分野の他の講座を見てみましょう!