Next.js関連
Next.js15でshadcn/uiを用いて色々作っています。それについての記録です。
自サーバで運用するための設定
Vercelサーバではなく、自前のWebサーバで運用ためのNginxやNode、PM2の設定についての実践記録です。
SELECT系専用のリードレプリカ(スレーブ)DBとマスタDBへの接続を同居させる方法
2025/6/20 公開
![[自サーバでNext.jsアプリを動かす#5]リードレプリカ(スレーブ)DBの利用](/_next/image?url=%2Farticles%2Fserver%2Fdb-replica%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリケーションを自サーバで運用するためのNginxのセキュリティヘッダと静的アセットのキャッシュ期間設定を実施
2025/6/20 公開
![[自サーバでNext.jsアプリを動かす#4]セキュリティヘッダと静的アセットのキャッシュ期間の設定](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-header%2Fhero-thumbnail.jpg&w=1200&q=75)
キャッシュゾーンを利用してサーバ負荷を軽減しながらNext.jsで構築したWebアプリケーションを運用
2025/6/20 公開
![[自サーバでNext.jsアプリを動かす#3]Nginxのキャッシュゾーン設定](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-cache%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリを自サーバで運用するために「PM2」というミドルウェアを利用して、快適に運用して方法のまとめ
2025/6/20 公開
![[自サーバでNext.jsアプリを動かす#2]PM2を利用して、快適にNext.jsアプリを動かす](/_next/image?url=%2Farticles%2Fnext-js%2Fpm2%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリを自サーバのNginxで動かすための設定とデプロイ作業の整理
2025/6/20 公開
![[自サーバでNext.jsアプリを動かす#1]Node.jsインストール＋Nginx設定＋デプロイ](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-setting%2Fhero-thumbnail.jpg&w=1200&q=75)
shadcn/ui関連
shadcn/ui関連の情報をまとめています。shadcn/uiはUI作成にかかっている時間の短縮には最適と思います。
これまで進めてきたログイン画面、ユーザー管理、ロール管理、サイドバー管理などをまとめ、「UIのみ版」デモを公開
2025/9/4 公開
![[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法](/_next/image?url=%2Farticles%2Fnext-js%2Fdashboard-format-ui-demo%2Fhero-thumbnail.jpg&w=1200&q=75)
管理画面に「ログイン後の404ページ」と、ログイン前にユーザが管理者へ依頼できる「パスワード忘れ導線UI」を追加
2025/9/2 公開
![[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-404-password-forgot%2Fhero-thumbnail.jpg&w=1200&q=75)
サイドバーに表示するメニューをUIから登録・編集・削除できる管理画面を作成
2025/8/29 公開
![[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-menu-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
ロールテーブルを管理画面から操作するためのUIを、Next.js 15 + shadcn/ui + React Hook Form + Zodで実装
2025/8/26 公開
![[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-role-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成
2025/8/22 公開
![[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更](/_next/image?url=%2Farticles%2Fnext-js%2Fuser-profile-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト
2025/8/19 公開
![[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期](/_next/image?url=%2Farticles%2Fnext-js%2Fsidebar-active-sync%2Fhero-thumbnail.jpg&w=1200&q=75)
管理者向けのユーザ詳細表示・新規登録・編集画面をShadcn/uiとReact Hook Form、Zodを組み合わせて実装
2025/8/16 公開
![[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装](/_next/image?url=%2Farticles%2Fnext-js%2Fuser-management-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成
2025/8/8 公開
![[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト](/_next/image?url=%2Farticles%2Fnext-js%2Fdashboard-layout%2Fhero-thumbnail.jpg&w=1200&q=75)
Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践
2025/7/24 公開
![[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面](/_next/image?url=%2Farticles%2Fnext-js%2Flogin-form%2Fhero-thumbnail.jpg&w=1200&q=75)
開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認
2025/6/20 公開
バックエンド構築関連
Next.jsでバックエンド回りを構築した実践記録です
プロフィール編集機能を拡張し「アバター削除」「メールアドレス変更新（メールでの本人認証＋管理者承認）」「パスワード変更」を実装
2025/9/21 公開
![[管理画面フォーマット開発編 #5] ユーザプロフィール更新](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-profile%2Fhero-thumbnail.jpg&w=1200&q=75)
ユーザープロフィールに欠かせないアバター画像を、安全にアップロード・表示する仕組みを構築
2025/9/16 公開
![[管理画面フォーマット開発編 #4] Server Actionで実装するアバター画像のアップロードと表示](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-avatar-upload%2Fhero-thumbnail.jpg&w=1200&q=75)
ログイン成功直後に取得したユーザー情報をAuthProvider（Client Context）でアプリ全体に配布
2025/9/12 公開
![[管理画面フォーマット開発編 #3] AuthProviderでログイン済みユーザー情報を全体共有](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-auth-provider%2Fhero-thumbnail.jpg&w=1200&q=75)
httpOnly Cookie と middleware を組み合わせ、JWTはjtiのみを運ぶ“鍵”として使用。法人ユースに耐える堅牢なログインを実装
2025/9/12 公開
![[管理画面フォーマット開発編 #2] JWT +Cookie＋middlewareで実装するログイン機能](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-login%2Fhero-thumbnail.jpg&w=1200&q=75)
管理画面フォーマット（UIのみ版）を土台に、バックエンドの第一弾としてのDB設計
2025/9/10 公開
![[管理画面フォーマット開発編 #1] Prisma × PostgreSQLで進めるDB設計](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-prisma-db-design%2Fhero-thumbnail.jpg&w=1200&q=75)
APIを安全にする鍵は「ロールベースの認可」。JWTのpayloadに含めたロール情報を活用し、Admin専用APIの実装を通じてRBACの基本を実践
2025/8/5 公開
スキーマ設計とDB連携の基礎構築を通じて、認可の土台となるユーザー・ロール情報の管理を実践
2025/8/3 公開
ログイン済みのadminユーザーだけにユーザー一覧を表示します。JWT認証の保護ルートとRBAC導入の第一歩となる実装
2025/7/30 公開
Shadcn/uiとつなぐ認証基盤の第一歩
2025/7/29 公開
JWTについて、Next.jsでのログイン認証に使えるトークンの仕組みと活用方法を初心者向けに丁寧に解説
2025/7/23 公開
補足情報
Next.js関連の補足情報です。ツール作成のフレームワーク選びの参考にさればと思います。
GitHub Actions で Playwright を動かし、結果をレポート & ブランチ保護まで設定
2025/7/17 公開
ボタンをクリックしているだけで、テストが自動生成。『壊れてないか？』を毎回手動で確かめる作業とおさらば
2025/7/15 公開
GitHub Actions を使った CI（継続的インテグレーション）の最小構成 を体験
2025/7/10 公開
これからGitを使い始めるフロントエンド/バックエンド開発者向けに少しだけGitコマンドをDeep Dive
2025/7/9 公開
GitHubは「見るだけ。DLするだけ」からの卒業を目指して、利用しながら理解する第一歩の記録
2025/7/7 公開
Tailwind CSSを快適に利用するための公式プラグインの導入についてのまとめ
2025/7/4 公開