Your cart is empty.
Keep shoppingNext.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座
1,514 students
Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座
世界トップクラスのエンジニア「shadcn」のプロジェクトからモダンな技術スタックを通して、Webアプリ開発を学ぶ講座です。API Routeを使ったAPI開発やNextAuth.jsを使ったユーザー認証まで幅開く解説しています。
Created byShin Code
Last updated 6/2024
Japanese
Japanese [Auto],
What you'll learn
- Nextjs/shadcn/uiを使って本格的なWebサービスが作れる
- Nextjs AppRouterでの実装とRSCを考慮しながら開発ができる
- トップWebエンジニアshadcnのプロジェクトからコーディングが学べる
- Nextjsのルートグループのディレクトリを作成して開発できる
- TailwindCSSとshadcn/uiベースでレスポンシブに対応できる
- メタデータ情報をページ毎に付与できる
- contentLayerを使ってマークダウン形式でブログ投稿できる
- tailwindcss/typographyの導入方法が分かる
- ログイン/新規登録機能が実装できる
- GithubとGoogleを使ったOAuth認証ができる
- NextAuthjsのv4を使って認証とセッション管理ができる
- Nextjsのmiddlewareを実装してトークン有無によってリダイレクト制御ができる
- SupabaseとPrismaとNextAuthを組み合わせた認証とDB管理ができる
- モデル作成と外部キー接続ができる
- セッション管理とJWT管理の切り替えができる
- ユーザー管理ページの作成とサイドバー作成ができる
- 記事投稿機能が実装できる
- Typescriptベースでアプリ開発ができる
- NextjsのAPI Routeを使ってCRUDのAPI実装ができる
- Zodを使ったバリデーションチェックができる
- react-hook-formを使って堅牢性のあるフォーム管理ができる
- EditorJSとreact-textarea-autosizeライブラリの扱い方が分かる
- 関数のメモ化とuseEffectのクリーンアップの実装ができる
- フェッチ時のローディング実装ができる
- アラートダイアログの追加、エラーハンドリング、アクセス制御等
- ビルドとプレビュー、Vercelへのデプロイができる
- OAuthやSupabaseで本番環境でも認証を機能させられる
Explore related topics
Course content
9 sections • 104 lectures • 8h 15m total length
Requirements
- HTML/CSSの前提知識(div, p, h1, block, inline要素等)
- Javascript文法の前提知識(if, for文等)
- Reactの前提知識(コンポネントやJSXの理解)
Description
Next.js App Routerの利用とshadcn/ui, contentLayer, NextAuth, Supabase, Prismaを利用したブログポストWebアプリケーション開発を行って実践力を身に着ける講座です。
世界トップWebエンジニア「shadcn」が開発したプロジェクトを参考にして作るWebアプリを通して、実務で通用するWeb開発スキルを習得します。
■ 本コースの対象者
世界トップエンジニアのプロジェクトから学びたい方
1から本格的なWebアプリケーション開発の流れを知りたい方
shadcn/uiに興味がある方
フルスタックエンジニアとして活躍していきたい方
Next.js AppRouterで実用的なアプリケーションを作りたい方
■ 本コースを受講する際の注意点
HTML/CSS/JavaScriptに関する基本的な知識があることを前提としています。
Reactの基礎（コンポーネント、JSX記法など）についての理解が必要です。
JavaScriptに関する実務経験があると、よりスムーズに講座を進めることができます。
世界トップエンジニアのプロジェクトを通してアプリ開発を学びましょう。この講座が終われば自由自在にアプリ開発ができるようになるはずです。ChatGPTでも分からない内容をより丁寧に詳しく解説しています。
Who this course is for:
- 1から本格的なWebアプリケーション開発の流れを知りたい方
- 世界トップエンジニアのソースコードから開発を学びたい方
- shadcn/uiに興味がある方
- フルスタックエンジニアとして活躍していきたい方
- 個人開発でお金を稼いでいきたい方
- NextjsのAppRouterを学びたい方