Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座 from Udemy

What's inside

Learning objectives

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で本番環境でも認証を機能させられる
Show more
Show less

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で本番環境でも認証を機能させられる
Show more
Show less

Syllabus

本講座で学べる事が理解できます。

本講座で学べる事

完成品のデモ

参考にしたGithubリポジトリとshadcnの紹介

Next.jsとShadcn/uiでレスポンシブ対応のランディングページを作れるようになります。

Next.jsの開発環境構築をはじめよう

shadcn/uiのセットアップをはじめよう

日本語フォントへ変更とlayout.tsxの修正

ルートグループの作成とHomeページの作成

アプリタイトルセクションのHTMLとCSSを実装しよう

Webアプリ情報は別ファイルで管理しよう

ヘッダー作成をはじめよう

ナビゲーションコンポーネントを作成しよう

マーケティングセクションのナビゲーション情報は別ファイルで管理しよう

スマホサイズ用のナビゲーションメニューを作成しよう

モバイルナビゲーションを実装しよう

featuresセクションの作成をはじめよう

技術スタック説明一覧を作成しよう

技術カードのレイアウト調整をしよう

featuresセクションの残りのレイアウトを追加しよう

コンタクトセクションを作成しよう

useLockBodyScrollを使って画面のスクロールを制御しよう

フッターコンポーネントを作成しよう

Homeページの詳細なメタデータ設定をしよう

contentLayerを利用してマークダウン形式でブログ投稿ができるようになります。

contentLayerの導入とNext.jsのバージョンダウン

next.config.jsとtsconfig.jsonを修正しよう

TailwindCSSが適用されないバグを修正しよう

contentLayer.configファイルでブログの型定義をしよう

マークダウン形式でブログ投稿してみよう

ブログページを作成してマークダウンブログを取得してみよう

ブログ一覧用のレイアウトを実装してブログ一覧表示してみよう

ブログページのレイアウトの修正をしよう

ブログ詳細ページを作成しよう

詳細ブログのslugが合致している場合のみデータを取得しよう

詳細ブログのレイアウトを作成しよう

Mdxコンポーネントを作成してマークダウンをHTMLとして出力してみよう

マークダウンで利用しているコンポーネントを自作で作ろう

tailwindcss/typographyを利用してみよう

動的ブログページのメタデータ設定をしよう

NextAuth.jsを使ってOauth認証を利用してユーザー認証管理ができるようになります。

ログイン認証用ページを作成しよう

ログイン/新規登録用フォームを作成しよう

Githubログイン用にレイアウトを追加しよう

lucide-reactアイコンを用意しよう

NextAuth.jsのセットアップをはじめよう

GithubでOauth認証のセットアップをはじめよう

セッション情報管理用のコールバック関数を準備しよう

GithubクライアントIDとシークレットキーを環境変数で準備しよう

NEXTAUTH_SECRETを環境変数で宣言しておこう

認証ローディング状態のUIを用意しよう

NextAuth.jsでNext.jsのミドルウェア設定をしよう

トークン状態に応じてページ表示先を変更させよう

Googleアカウントを使ったOauth認証設定をはじめよう

Googleログインボタンを作成してGoogleアカウントでログインしよう

新規登録ページを作成しよう

SupabaseとPrismaを組み合わせてDB管理ができるようになります。

SupabaseとPrisma ORMのセットアップを始めよう

PrismaAdapter設定とテーブルへ格納するモデルを作成しよう

モデルの修正と@relationと外部キーについて

残りのモデルスキーマを修正しよう

ユーザー記事投稿用のスキーマを作成しよう

PrismaClientのインスタンス再生成を防ごう

Prismaマイグレーション操作でモデルをテーブルへ反映させよう

セッションの管理からJWTでの管理へ切り替えよう

Webアプリのダッシュボードページや記事作成のAPIの実装ができるようになります。

ダッシュボードページを作成しよう

ダッシュボードページのレイアウト修正をしよう

ダッシュボードナビゲーションを作成しよう

サイドバー用のアイコンを用意しよう

サイドバーで選択中の項目をハイライトさせよう

記事投稿用のダッシュボードページを作成しよう

ダッシュボードで共通するヘッダーを作成しよう

記事投稿用ボタンを作成しよう

試しにSupabaseで記事をいくつか投稿してみよう

現在ログインしているユーザーのセッション状態する関数を実装しよう

Pick型でPropsを割り当てて投稿した記事を出力してみよう

記事の削除や編集ができるボタンUIを追加しよう

記事投稿用APIをNext.js AppRouterで作ろう

Zodライブラリを利用して期待する型かどうか検証しよう

APIを叩いて記事を作成・投稿してみよう

ユーザー認証時にセッションにトークンIDを付与しよう

作成に失敗した場合にトースターを出してみよう

EditorJSやRHFを使って記事エディタを作成できるようになります。

記事作成エディタページの作成をはじめよう

エディタコンポーネントを作成しよう

react-textarea-autosizeライブラリを使ってみよう

EditorJSを使ってエディタを簡単に導入してみよう

EditorJSにheadingやlist等のツールを追加しよう

関数のメモ化とuseEffectのクリーンアップ関数を追加しよう

詳細記事データを取得してエディタコンポーネントへ渡そう

react-hook-formとzodを導入してformの状態管理をしよう

zodで記事データのスキーマを定義しよう

書いた記事内容のデータが保存時に取得できるか確認しよう

記事コンテンツ保存用APIを作成しよう

他ユーザーが投稿できないようにアクセス制御やエラーハンドリングをしよう

保存ボタンを押下してAPIフェッチが走る実装をしよう

フェッチ時ローディングとpostデータの型チェックをしよう

EditorJSを使ったheadingにCSSが付かないバグの修正

記事の削除用にアラートダイアログを実装しよう

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches the use of Nextjs, shadcn/ui, contentLayer, NextAuth, Supabase, and Prisma for building a blog post web application, developing practical skills that are applicable in real-world settings

Utilizes a project developed by world-renowned web engineer "shadcn" as reference, to learn from industry-leading coding practices

Suitable for learners seeking to build full-stack web applications and develop proficiencies as full-stack engineers

Assumes prior knowledge of HTML/CSS/JavaScript and a foundational understanding of React

Requires JavaScript experience for a smoother learning process

Covers a wide range of topics, including Nextjs AppRouter implementation, RSC considerations, responsive design, content management, user authentication, database management, form validation, and more

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座 with these activities:

Next.jsの公式ドキュメントを読む

Show steps

Next.jsの公式ドキュメントを確認し、基本的な概念や使用方法を復習します。

Browse courses on Next.js

Show steps

Next.jsの公式サイトにアクセス
ドキュメントの「はじめに」セクションを読む
ルーティング、データフェッチング、コンポーネントなどのトピックに関するドキュメントを読む

Vue Routerでアプリケーションのルーティングを実装する

Show steps

Vue Routerを使用してアプリケーションのルーティングを学び、アプリケーションのURL構造と画面遷移を制御します。

Show steps

Vue Routerのインストールと設定
ルートの設定とコンポーネントのマッピング
パラメーターとクエリ文字列の使用
動的ルーティングの設定
ナビゲーションガードの使用

他の学習者とディスカッションする

Show steps

他の学習者とつながり、アイデアを共有し、理解を深めます。

Show steps

ディスカッションフォーラムやチャットに参加
質問を投稿し、他の学習者の回答に反応
自分の理解を説明し、他の学習者の理解を支援

Five other activities

Expand to see all activities and additional details

Show all eight activities

Next.jsのルーティングに関する問題を解く

Show steps

Next.jsのルーティングに関する練習問題を解き、理解を強化します。

Browse courses on Next.js

Show steps

オンラインプラットフォームや問題集で問題を探す
問題を注意深く読み、解く
必要に応じてドキュメントやチュートリアルを参照

Next.jsアプリケーションでブログを作成する

Show steps

Next.jsを使用してブログを作成し、コンテンツの作成、管理、表示に必要な機能を習得します。

Browse courses on Next.js

Show steps

Next.jsプロジェクトを作成
ブログの投稿を作成するためのページを作成
投稿のフォームを作成して、入力を受け付ける
投稿データをサーバに送信して保存
投稿を一覧表示するページを作成

Next.jsに関するワークショップに参加する

Show steps

Next.jsに関するワークショップに参加し、専門家から直接学び、実践的な経験を積みます。

Browse courses on Next.js

Show steps

関連するワークショップをオンラインまたはオフラインで探す
ワークショップに登録して、参加する
講師の指示に従い、実践的な課題に取り組む

個人プロジェクトに取り組む

Show steps

独自のNext.jsアプリケーションを構築し、ルーティング、データフェッチング、スタイリングなどのスキルを応用します。

Show steps

プロジェクトのアイデアを考え出す
アプリケーションの構造を計画
必要なコンポーネントとページを作成
ルーティングを設定して、ページ間を移動
データフェッチングを実装して、APIからデータを取得

業界のイベントに出席する

Show steps

業界のイベントやカンファレンスに参加して、他の専門家とつながり、新しいトレンドや技術を学びます。

Show steps

関連するイベントをオンラインまたはオフラインで探す
イベントに登録して、参加する
他の参加者に会い、名刺を交換する

Career center

Learners who complete Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Next.js × shadcn/ui × Supabaseで本格的なWebアプリ開発を学ぶフルスタック講座

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses