When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座
世界トップクラスのエンジニア「shadcn」のプロジェクトからモダンな技術スタックを通して、Webアプリ開発を学ぶ講座です。API Routeを使ったAPI開発やNextAuth.jsを使ったユーザー認証まで幅開く解説しています。
This Course Includes
udemy
4.7 (34 reviews )
8.5 total hours 
japanese
Online - Self Paced
course
Udemy
About Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座
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でも分からない内容をより丁寧に詳しく解説しています。
What You Will 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で本番環境でも認証を機能させられる.