Next.js関連

Next.js15でshadcn/uiを用いて色々作っています。それについての記録です。

myserver

自サーバで運用するための設定

Vercelサーバではなく、自前のWebサーバで運用ためのNginxやNode、PM2の設定についての実践記録です。

[自サーバでNext.jsアプリを動かす#5]リードレプリカ(スレーブ)DBの利用

SELECT系専用のリードレプリカ(スレーブ)DBとマスタDBへの接続を同居させる方法

2025/6/20 公開

[自サーバでNext.jsアプリを動かす#5]リードレプリカ(スレーブ)DBの利用

[自サーバでNext.jsアプリを動かす#4]セキュリティヘッダと静的アセットのキャッシュ期間の設定

Next.jsで作成したWebサイト・アプリケーションを自サーバで運用するためのNginxのセキュリティヘッダと静的アセットのキャッシュ期間設定を実施

2025/6/20 公開

[自サーバでNext.jsアプリを動かす#4]セキュリティヘッダと静的アセットのキャッシュ期間の設定

[自サーバでNext.jsアプリを動かす#3]Nginxのキャッシュゾーン設定

キャッシュゾーンを利用してサーバ負荷を軽減しながらNext.jsで構築したWebアプリケーションを運用

2025/6/20 公開

[自サーバでNext.jsアプリを動かす#2]PM2を利用して、快適にNext.jsアプリを動かす

Next.jsで作成したWebサイト・アプリを自サーバで運用するために「PM2」というミドルウェアを利用して、快適に運用して方法のまとめ

2025/6/20 公開

[自サーバでNext.jsアプリを動かす#2]PM2を利用して、快適にNext.jsアプリを動かす

[自サーバでNext.jsアプリを動かす#1]Node.jsインストール＋Nginx設定＋デプロイ

Next.jsで作成したWebサイト・アプリを自サーバのNginxで動かすための設定とデプロイ作業の整理

2025/6/20 公開

[自サーバでNext.jsアプリを動かす#1]Node.jsインストール＋Nginx設定＋デプロイ

shadcn-ui

shadcn/ui関連

shadcn/ui関連の情報をまとめています。shadcn/uiはUI作成にかかっている時間の短縮には最適と思います。

[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法

これまで進めてきたログイン画面、ユーザー管理、ロール管理、サイドバー管理などをまとめ、「UIのみ版」デモを公開

2025/9/4 公開

[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法

[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI

管理画面に「ログイン後の404ページ」と、ログイン前にユーザが管理者へ依頼できる「パスワード忘れ導線UI」を追加

2025/9/2 公開

[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI

[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで

サイドバーに表示するメニューをUIから登録・編集・削除できる管理画面を作成

2025/8/29 公開

[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで

[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）

ロールテーブルを管理画面から操作するためのUIを、Next.js 15 + shadcn/ui + React Hook Form + Zodで実装

2025/8/26 公開

[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更

管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成

2025/8/22 公開

[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期

Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト

2025/8/19 公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装

管理者向けのユーザ詳細表示・新規登録・編集画面をShadcn/uiとReact Hook Form、Zodを組み合わせて実装

2025/8/16 公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト

Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成

2025/8/8 公開

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面

Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践

2025/7/24 公開

Next.js+shadcn/uiのインストールと基本動作のまとめ

開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認

2025/6/20 公開

backend

バックエンド構築関連

Next.jsでバックエンド回りを構築した実践記録です

[管理画面フォーマット開発編 #11] パスワード再発行依頼とメールテンプレート統合

管理画面で受け付けたパスワード再発行依頼を、Server Action・Shadcn/uiのデータテーブル・メール送信を組み合わせて運用可能なワークフローに統合

2025/10/15 公開

[管理画面フォーマット開発編 #11] パスワード再発行依頼とメールテンプレート統合

[管理画面フォーマット開発編 #10] メニュー管理UIをDB連携する

グローバルで一貫したMenuテーブルを保ちながら、部署ごとにメニュー表示をカスタマイズ

2025/10/12 公開

[管理画面フォーマット開発編 #9 後編] 部署別ロール対応 ─ プロフィール管理の改修

DepartmentRole導入に伴い、プロフィール管理で「実効ロール」を参照するように修正と一部ついでの変更

2025/10/8 公開

[管理画面フォーマット開発編 #9 前編] 部署別ロール対応 ─ ユーザ管理の改修

DepartmentRole導入に伴い、ユーザ管理で「実効ロール」を参照するように修正

2025/10/5 公開

[管理画面フォーマット開発編 #9 前編] 部署別ロール対応 ─ ユーザ管理の改修

[管理画面フォーマット開発編 #8 後編] 部署別ロール ─ 管理UIとServer Action実装

部署ごとのロールを実際に操作できるように、Server Actionと管理画面UIを構築

2025/10/2 公開

[管理画面フォーマット開発編 #8 後編] 部署別ロール ─ 管理UIとServer Action実装

[管理画面フォーマット開発編 #8 前編] 部署別ロール ─ DepartmentRoleテーブル導入とDB設計

グローバルで一貫したRoleテーブルを保ちながら、部署ごとにロールをカスタマイズするために「DepartmentRole」テーブルを新設

2025/9/29 公開

[管理画面フォーマット開発編 #8 前編] 部署別ロール ─ DepartmentRoleテーブル導入とDB設計

[管理画面フォーマット開発編 #7] ユーザ管理UIをDB連携する

ユーザ一覧表示・新規登録・編集フォームをDBと連動させ、ユーザデータを操作できる形へ

2025/9/28 公開

[管理画面フォーマット開発編 #6] RBAC調整 ─ ページ単位のアクセス制御を実装する

これまでメニュー表示に適用していたRBACを、各ページのアクセス制御に拡張

2025/9/23 公開

[管理画面フォーマット開発編 #6] RBAC調整 ─ ページ単位のアクセス制御を実装する

[管理画面フォーマット開発編 #5] ユーザプロフィール更新

プロフィール編集機能を拡張し「アバター削除」「メールアドレス変更新（メールでの本人認証＋管理者承認）」「パスワード変更」を実装

2025/9/21 公開

[管理画面フォーマット開発編 #4] Server Actionで実装するアバター画像のアップロードと表示

ユーザープロフィールに欠かせないアバター画像を、安全にアップロード・表示する仕組みを構築

2025/9/16 公開

[管理画面フォーマット開発編 #3] AuthProviderでログイン済みユーザー情報を全体共有

ログイン成功直後に取得したユーザー情報をAuthProvider（Client Context）でアプリ全体に配布

2025/9/12 公開

[管理画面フォーマット開発編 #3] AuthProviderでログイン済みユーザー情報を全体共有

[管理画面フォーマット開発編 #2] JWT +Cookie＋middlewareで実装するログイン機能

httpOnly Cookie と middleware を組み合わせ、JWTはjtiのみを運ぶ“鍵”として使用。法人ユースに耐える堅牢なログインを実装

2025/9/12 公開

[管理画面フォーマット開発編 #2] JWT +Cookie＋middlewareで実装するログイン機能

supplement

補足情報

Next.js関連の補足情報です。ツール作成のフレームワーク選びの参考にさればと思います。

GitHub Actions ではじめる Playwright E2E CI

GitHub Actions で Playwright を動かし、結果をレポート & ブランチ保護まで設定

2025/7/17 公開

はじめてのPlaywright-"録画"で体験する E2E テスト入門

ボタンをクリックしているだけで、テストが自動生成。『壊れてないか？』を毎回手動で確かめる作業とおさらば

2025/7/15 公開

GitHub設定編：最小構成の CI を動かすまで

GitHub Actions を使った CI（継続的インテグレーション）の最小構成を体験

2025/7/10 公開

Git基本コマンド10選 -はじめてのバージョン管理で開発を加速

これからGitを使い始めるフロントエンド/バックエンド開発者向けに少しだけGitコマンドをDeep Dive

2025/7/9 公開

GitHub超入門-アカウント作成から初pushまでゆっくりガイド

GitHubは「見るだけ。DLするだけ」からの卒業を目指して、利用しながら理解する第一歩の記録

2025/7/7 公開

Cursorエディタの設定-Tailwind CSS 公式プラグインの設定

Tailwind CSSを快適に利用するための公式プラグインの導入についてのまとめ

2025/7/4 公開