Course curriculum

    1. 本講座で学べる事

    2. 完成品のデモ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    13. マークダウンで出力されたデータをHTMLとして出力させるには

    14. tailwindcss/typographyを利用してみよう

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

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

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

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

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

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

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

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

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

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

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

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

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

    13. GoogleでOauth認証設定をやってみよう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

About this course

  • 39,800円
  • 104回のレッスン
  • 8.5時間の動画コンテンツ

Discover your potential, starting today