【Next.js】フルスタック開発基本講座(TypeScript/Prisma/Auth)【脱初心者/わかりやすさ重視】

appフォルダ内の不要な箇所を削除しシンプルな状態にします。合わせてappフォルダ内の特別なファイルを複数紹介しています。

フォルダを作成しpage.tsxを作成することで自動的にルーティング設定される動作を確認しています。

urlの一部が記事idなど動的にurlが変わる箇所を設定し、情報取得する方法も合わせて解説しています。

動的ルーティングで設定したparamsの型の確認と設定方法を解説しています。

フォルダとしてまとめつつurlには反映させたくない場合によく使うルーティンググループについて解説しています。

URLに反映させない方法の2つ目としてプライベートフォルダ機能もありますので解説しています。

プロジェクト全体に影響する app/layout.tsx について解説しています。

layoutファイルは下層ページにも影響するというのを実際に動作確認しています。

ページが存在しない場合のNot foundページをカスタマイズする方法を解説しています。

データベースやAPIから情報取得時のローディング表示を設定する方法をご紹介しています。

データ取得時などにエラーが発生する場合に表示するエラーページの作り方を解説しています。

APIエンドポイントを簡単に作ることができるのでその方法を解説しています。

Googleの検索結果ページやSNSでシェアされた際に表示されるOGPなどのメタデータを設定する方法を解説しています。

ページを表示する前に実行したい処理を記述できるミドルウェアについて解説をしています。

このセクションのまとめになります。

クライアントコンポーネント(RCC)とサーバーコンポーネント(RSC)の違いについて解説しています。

サーバー側のコンポーネントとクライアント側のコンポーネントを実際に作成し動作の違いを確認しています。

RSCでReactHookやイベントを記述するとエラーが出るという事を実際に動作確認しています。

1ページの中にサーバーコンポーネントとクライアントコンポーネントを組み合わせて使う方法や、Client Boundaryについて解説しています。

リンクを作成する方法としてLinkコンポーネントとuseRouterフックの違いを解説しています。

4つのレンダリング方法について比較表も用いて違いを解説しています。

レンダリングの動作確認に際し、画像を自動最適化するImageコンポーネントも使いたいので事前の設定方法を解説しています(next.config.tsに外部ドメインを追記)

SSR, SSG, ISRの挙動の違いを実際にコードを書いてコンパイルし、確認する方法を解説しています。

SSR, SSG, ISRの挙動の違いを実際にコードを書いてコンパイルし、確認する方法を解説しています。

従来のクライアントサイドのCRUDに加え、サーバーサイド側でも3通りのデータ操作の方法があるので機能の比較を解説しています。(Route Handlers, RSC, Server Actions)

このセクションのまとめになります。

今回作成するフォームの機能や扱うライブラリを解説後、HTML/tailwindcssを使ってフォームを作成していきます。

ServerActionsを使ってフォーム送信後にサーバー側で処理をしredirectをする方法を解説しています。

TypeScript用のスキーマ検証ライブラリであるzodをインストールし、まずはサーバー側のバリデーションをかけていきます。

React19で追加されたuseActionStateフックを使い、サーバー側のエラー内容をブラウザ側に表示する方法を解説しています。

フォーカスが外れた時にエラーが表示されるようにクライアント側も対応しています。

JS/TSのORMライブラリであるPrismaの概要とインストール・初期設定などを解説しています。

Prismaスキーマに情報を記載しDBテーブルを作成しつつ、Prisma Studioで表示する方法を解説しています。

メールアドレス重複チェックの方法と、DBテーブルへの登録方法を解説しています。

Prismaを使ってDBから情報取得をする方法を解説しています。

このセクションのまとめになります。

簡易ブログシステムの完成例、技術構成について解説しています。

新しくフォルダを作成し環境構築しつつ、Git/GitHubリポジトリを作成しpushしています。

ログイン・ユーザー登録関係、認証なし、認証ありの3つに分けてグループを作成しています。

Prisma関連のインストールと初期設定について解説しています。

1対多のリレーションも含めたスキーマの内容を解説しています。

ダミーデータの設定方法を解説しています。

マイグレーション実行しテーブル作成&ダミーデータも投入し、Prisma Studioで内容確認する方法を解説しています。

軽量で柔軟なUIコンポーネントであるshadcn/ui の概要・インストール・コンポーネント追加について解説しています。

shadcn/uiも使いつつヘッダー画面を作成する方法を解説しています。

layouts.tsxを作成したり、不要なpage.tsxを削除しつつ、ヘッダーの表示確認をしています。

prismaを使って記事一覧の情報を取得するための関数や、必要なライブラリ・コンポーネントのインストール、またPost型の作成などを解説しています。

shadcn/uiを使ったカードコンポーネントやdate-fnsで日付フォーマットの方法を解説しています。

カードコンポーネントに画像も追加しつつ、記事一覧ページの表示確認する方法を解説しています。

prismaで1記事取得できるようにし、notFoundページも作成しつつ、1記事用のページコンポーネントにインポートしています。

記事詳細ページを表示するように調整しています。

記事検索機能に必要なコードの解説をしています。(複数キーワード検索に対応したprismaの書き方、デバウンスの設定など)

prismaを使った複数キーワードの検索機能コードと、useEffectを使ったデバウンスのコードをハンズオンで解説しています。

記事一覧ページで複数キーワードの検索ができるように対応しています。

このセクションのまとめになります。

Auth.jsの解説とインストール方法を解説しています。

認証の設定ファイルとミドルウェアのファイルを解説しつつ作成しています。

Auth.js設定ファイルを作成しメールアドレス・パスワードでログインができるように実装していきます。

サーバーアクションを使ってログイン機能を作成し、認証用のレイアウトを作成する方法を解説しています。

ログインフォームをハンズオンで解説しています。

引き続きログインフォームをハンズオンで解説しています。

ログイン後の共通ヘッダーとしてPrivateHeaderを作る方法を解説しています。

shadcn/uiのDropdownコンポーネントも使いつつログアウト機能を実装しています。

ログイン後のurlが/loginのままで、うまくログアウトができない不具合がありましたのでその対策方法を解説しています。

ユーザー登録ページを作っていきます。zodバリデーションスキーマと、型指定としてRecordユーティリティ型の解説・実装をしています。

引き続きserverActionの機能を作っていきます。フォームからの情報取得、バリデーション、DB登録など。

ユーザー登録フォームを作成し、ユーザー登録時のエラーや登録後にダッシュボードに遷移するようにしています。

npm run build時にESLintのエラーが出ていましたので対応方法を解説しています。

このセクションのまとめになります。

ログイン後の画面や機能についてRESTful APIに合わせた表の解説と、ログインユーザーのidを取得する方法を解説しています。

prismaとauthを使ってログインしているユーザーが投稿している記事一覧を取得する方法を解説・実装しています。

記事一覧ページのレイアウトを作っていきます。

詳細、編集、削除をまとめるためのDropdownMenuコンポーネントを作りつつ、レイアウト調整し表示確認しています。

記事作成画面で含めたい機能を解説しつつ、必要なライブラリのインストール方法を解説しています。

必要なimportの実施、フォームのUI作成、文字数カウントなどを解説・実装しています。

ReactMarkdownコンポーネントを使ってプレビュー表示する方法を解説しています。

画像アップロードの処理の解説と実装をしています。(arrayBuffer, Buffer, writeFileなど)

バリデーションの準備とServerActionでフォームデータ取得まで実装しています。

バリデーション、画像保存、DB登録まで実装しています。

ServerActionとuseActionStateフックを使い記事の保存方法を解説しています。

記事の詳細画面の解説・クエリ作成・実装をしています。

記事の詳細画面でMarkdown表示や、ログインしていない画面のMarkdown表示などを解説しています。

記事編集画面はRSCとRCCを組み合わせて作成しますので、その方法を解説しています。

編集機能に必要なuseStateやpropsなどの追加実装をしています。

画像のプレビュー機能について解説と実装をしています。

表示非表示を切り替えれる機能を追加実装しています。

記事の登録機能を活用しつつ、更新機能を実装しています。

AlertDialogコンポーネントを使って削除機能を実装していきます。

DropdownメニューとDialogを組み合わせてポップアップを表示できるように実装しています。

server actionを使って記事の削除機能を実装しています。

このセクションのまとめになります。

今回はデプロイ先としてVercelとsupabaseを扱っていきます。

supabaseのアカウント作成し、プロジェクト、ストレージの作成方法まで解説しています。

supabaseのデータベースと接続してマイグレーションを実行し、ログイン確認までの内容を解説しています。

supabaseのストレージに接続し、画像アップロードの実装方法を解説しています。

vercelへログインし、githubリポジトリと接続してデプロイする方法を解説しています。

このセクションのまとめになります。

ボーナスレクチャーはudemy講座内で唯一 宣伝を行っていい場所になっております。