From 74f5375245f546d228ea075660bd4d312583916d Mon Sep 17 00:00:00 2001 From: seri Date: Fri, 6 Mar 2026 23:00:51 +0900 Subject: [PATCH 1/4] wip init From 9e1f106352d7353f3a5faa0e6ee94321cf8947ea Mon Sep 17 00:00:00 2001 From: seri Date: Sat, 7 Mar 2026 13:25:28 +0900 Subject: [PATCH 2/4] feat: implement navigation progress indicator --- .../src/app/(app)/_layout/app-layout.tsx | 51 +++++++------- .../src/app/(app)/_layout/breadcrumb.tsx | 2 +- apps/admin/src/app/(app)/_layout/sidebar.tsx | 2 +- .../[id]/edit/_parts/edit-account.tsx | 10 +-- .../system/accounts/_parts/account-list.tsx | 4 +- .../system/accounts/_parts/account-search.tsx | 6 +- .../accounts/new/_parts/create-account.tsx | 8 +-- apps/admin/src/components/link-indicator.tsx | 14 ++++ apps/admin/src/components/link.tsx | 9 ++- .../src/hooks/use-navigation-progress.tsx | 66 +++++++++++++++++++ apps/admin/src/styles/globals.css | 16 +++++ 11 files changed, 148 insertions(+), 40 deletions(-) create mode 100644 apps/admin/src/components/link-indicator.tsx create mode 100644 apps/admin/src/hooks/use-navigation-progress.tsx diff --git a/apps/admin/src/app/(app)/_layout/app-layout.tsx b/apps/admin/src/app/(app)/_layout/app-layout.tsx index b717f55..8271aab 100644 --- a/apps/admin/src/app/(app)/_layout/app-layout.tsx +++ b/apps/admin/src/app/(app)/_layout/app-layout.tsx @@ -3,6 +3,7 @@ import { usePathname } from "next/navigation"; import { Separator } from "@/components/ui/separator"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { NavigationProgressProvider } from "@/hooks/use-navigation-progress"; import { Breadcrumb } from "./breadcrumb"; import type { Navigation } from "./navigation"; import { ProtectedView } from "./protected-view"; @@ -20,30 +21,32 @@ export const AppLayout = ({ children, navigation, userName, userEmail }: Props) return ( - - - -
-
- - - -
-
-
{children}
- - - + + + + +
+
+ + + +
+
+
{children}
+ + + + ); }; diff --git a/apps/admin/src/app/(app)/_layout/breadcrumb.tsx b/apps/admin/src/app/(app)/_layout/breadcrumb.tsx index 89aaa2f..4b4e18d 100644 --- a/apps/admin/src/app/(app)/_layout/breadcrumb.tsx +++ b/apps/admin/src/app/(app)/_layout/breadcrumb.tsx @@ -1,9 +1,9 @@ "use client"; import React, { useMemo } from "react"; -import Link from "next/link"; import { usePathname } from "next/navigation"; import { BREADCRUMB_ROUTES } from "@/app/(app)/_layout/navigation"; +import { Link } from "@/components/link"; import { BreadcrumbItem, BreadcrumbLink, diff --git a/apps/admin/src/app/(app)/_layout/sidebar.tsx b/apps/admin/src/app/(app)/_layout/sidebar.tsx index 33a8c44..ada75f7 100644 --- a/apps/admin/src/app/(app)/_layout/sidebar.tsx +++ b/apps/admin/src/app/(app)/_layout/sidebar.tsx @@ -1,7 +1,7 @@ "use client"; -import Link from "next/link"; import { ChevronsUpDown, Gauge, LogOut, type LucideIcon, Shield, User, Users } from "lucide-react"; +import { Link } from "@/components/link"; import { DropdownMenu, DropdownMenuContent, diff --git a/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx b/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx index bd1cb2e..c88cb10 100644 --- a/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx +++ b/apps/admin/src/app/(app)/system/accounts/[id]/edit/_parts/edit-account.tsx @@ -1,7 +1,6 @@ "use client"; import { useState } from "react"; -import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { Loader2 } from "lucide-react"; import { useForm } from "react-hook-form"; @@ -21,6 +20,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from " import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; +import { useNavigationRouter } from "@/hooks/use-navigation-progress"; import { deleteAccountAction, updateAccountAction } from "./actions"; import { type EditAccountInput, editAccountSchema } from "./lib"; @@ -30,7 +30,7 @@ type Props = { }; export const EditAccount = ({ account, currentUserId }: Props) => { - const router = useRouter(); + const { push } = useNavigationRouter(); const [errorMessage, setErrorMessage] = useState(""); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [isDeleting, setIsDeleting] = useState(false); @@ -54,7 +54,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => { const result = await updateAccountAction(account.id, data); if (result.success) { toast.success("アカウントを更新しました"); - router.push("/system/accounts"); + push("/system/accounts"); } else { setErrorMessage(result.error || ""); if (result.fieldErrors) { @@ -75,7 +75,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => { const result = await deleteAccountAction(account.id); if (result.success) { toast.success("アカウントを削除しました"); - router.push("/system/accounts"); + push("/system/accounts"); } else { toast.error(result.error || "削除に失敗しました"); setShowDeleteDialog(false); @@ -199,7 +199,7 @@ export const EditAccount = ({ account, currentUserId }: Props) => { + + このメールに心当たりがない場合は、無視してください。 + + + + + ); +}; diff --git a/docker-compose.yml b/docker-compose.yml index 419919a..9125ad3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -3,7 +3,7 @@ services: image: postgres:18.1 container_name: next-admin_postgres ports: - - 5432:5432 + - 55432:5432 volumes: - ./infra/postgres/sql/:/docker-entrypoint-initdb.d/ - postgres-data:/var/lib/postgres @@ -12,31 +12,12 @@ services: POSTGRES_PASSWORD: "admin" networks: - next-admin-network - - localstack: - image: localstack/localstack:4.11.1 - container_name: next-admin_localstack - ports: - - "4566:4566" # LocalStack Gateway - - "4510-4559:4510-4559" # external services port range - environment: - - DEBUG=${DEBUG-} - - PERSISTENCE=${PERSISTENCE-} - - LAMBDA_EXECUTOR=${LAMBDA_EXECUTOR-} - - DOCKER_HOST=unix:///var/run/docker.sock - volumes: - - localstack-volume:/var/lib/localstack - - "/var/run/docker.sock:/var/run/docker.sock" - networks: - - next-admin-network - - mailhog: - image: mailhog/mailhog:latest - platform: linux/amd64 - container_name: next-admin_mailhog + ses: + image: oven/bun:1 + container_name: next-admin_ses ports: - - "8025:8025" - - "1025:1025" + - 58005:8005 + command: bunx aws-ses-v2-local --host=0.0.0.0 networks: - next-admin-network diff --git a/packages/db/.env.template b/packages/db/.env.template index 9b6cb34..e6fd9e7 100644 --- a/packages/db/.env.template +++ b/packages/db/.env.template @@ -1,7 +1 @@ -DATABASE_HOST=localhost -DATABASE_PORT=5432 -DATABASE_USERNAME=admin -DATABASE_PASSWORD=admin -DATABASE_NAME=next_admin -DATABASE_TIMEZONE="+09:00" -DATABASE_URL="postgresql://${DATABASE_USERNAME}:${DATABASE_PASSWORD}@${DATABASE_HOST}:${DATABASE_PORT}/${DATABASE_NAME}" +DATABASE_URL="postgresql://admin:admin@localhost:55432/next_admin" \ No newline at end of file diff --git a/packages/db/README.md b/packages/db/README.md index b67e705..afd1d88 100644 --- a/packages/db/README.md +++ b/packages/db/README.md @@ -1,20 +1,42 @@ # DB -## Environments +データベース管理パッケージ (`@next-admin/db`)。Prisma 7 を使用。 -Set following environments at applications. +## セットアップ手順 -- DATABASE_URL +### 1. 環境変数の設定 +`.env.template` を元に `.env` を作成する。 -## Connect database - +```bash +cp .env.template .env ``` -psql postgresql://admin:admin@127.0.0.1:5432/next_admin + +主な設定項目: + +| 変数 | デフォルト値 | 説明 | +| ------------------- | ---------------- | ---------------- | +| `DATABASE_HOST` | `localhost` | DBホスト | +| `DATABASE_PORT` | `55432` | DBポート | +| `DATABASE_USERNAME` | `admin` | DBユーザー | +| `DATABASE_PASSWORD` | `admin` | DBパスワード | +| `DATABASE_NAME` | `next_admin` | DB名 | +| `DATABASE_URL` | （上記から構成） | Prisma接続文字列 | + +### 2. Prisma クライアント生成 + +```bash +yarn db:generate ``` -## Create migration +### 3. マイグレーション実行 +```bash +yarn db:deploy ``` -yarn run prisma migrate dev --name first-migration + +## データベース接続 + +```bash +psql postgresql://admin:admin@127.0.0.1:55432/next_admin ``` From c3d03c7a6da4425d336deb113cdde80bb201266c Mon Sep 17 00:00:00 2001 From: seri Date: Sat, 7 Mar 2026 19:44:16 +0900 Subject: [PATCH 4/4] docs: update README files --- README.md | 44 ++++++++++++++++++++----------------------- apps/admin/README.md | 16 +++++++++++++--- packages/db/README.md | 13 +------------ 3 files changed, 34 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 6e0f655..10d8206 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,32 @@ # next-admin -Next.js 16 (App Router) を使用した管理画面アプリケーションテンプレート。Yarn Workspaces によるモノレポ構成。 +Next.jsを使用した管理画面アプリケーションのテンプレートプロジェクトで、 +Yarn Workspacesによるモノレポ構成になっています。 -## 技術スタック +## Base Libraries + +- Next.js 16 +- Better Auth 1.4 +- TailwindCSS 7 +- prisma 4 +- yarn 4 + +### Infrastructures + +- docker compose +- PostgreSQL 18 +- oven(SES) -| カテゴリ | 技術 | -| -------------------- | ------------------------------------- | -| フレームワーク | Next.js 16 (App Router) | -| 認証 | Better Auth 1.4 | -| データベース | PostgreSQL 18 / Prisma 7 | -| UI | Tailwind CSS 4 / shadcn/ui / Radix UI | -| フォーム | React Hook Form + Zod | -| メール | AWS SES / React Email | -| パッケージマネージャ | Yarn 4 | ## リポジトリ構成 ``` next-admin/ ├── apps/ -│ └── admin/ # 管理画面アプリケーション (Next.js) +│ ├── admin/ # 管理画面アプリケーション (Next.js) +│ └── web/ # サービスアプリケーション用フレイスホルダー ├── packages/ -│ └── db/ # データベースパッケージ (Prisma) -├── infra/ # インフラ設定 (PostgreSQL初期化SQLなど) -├── docker-containers/ # Docker関連設定 -├── docker-compose.yml # ローカル開発用インフラ (PostgreSQL, SES) -└── docs/ # ドキュメント +│ └── db/ # マイグレーション管理 (Prisma) +├── infra/ # インフラ設定 +└── docker-compose.yml # ローカル開発用インフラ管理 ``` - -## インフラ構成 (docker-compose) - -| サービス | ポート | 用途 | -| ------------- | ------ | -------------------------------------------- | -| PostgreSQL 18 | 55432 | データベース (user: admin / password: admin) | -| SES Local | 58005 | メール送信エミュレーション | diff --git a/apps/admin/README.md b/apps/admin/README.md index a5d71b3..d4f9c41 100644 --- a/apps/admin/README.md +++ b/apps/admin/README.md @@ -1,12 +1,12 @@ # Admin -管理画面アプリケーション（Next.js 16 / App Router） +Next.jsを使用した管理画面アプリケーション ## セットアップ手順 ### 1. インフラの起動 -プロジェクトルートで Docker コンテナを起動する。 +プロジェクトルートでDockerコンテナを起動する。 ```bash docker compose up -d @@ -14,7 +14,7 @@ docker compose up -d ### 2. Node.js のインストール -`.node-version` に記載のバージョンを使用する。 +`.node-version`に記載のバージョンを使用する。 ```bash cat .node-version | nodenv install @@ -70,3 +70,13 @@ yarn dev ブラウザで以下にアクセスし、最初の管理者アカウントを作成する。 - http://localhost:3500/firstuser + + +## 開発用Tips + +### メールの受信確認 + +ローカル環境で送信したメールは、実際のアドレスには送信されません。 +内容は以下のURLで確認することができます。 + +- http://localhost:58005/ diff --git a/packages/db/README.md b/packages/db/README.md index afd1d88..8c0cbb1 100644 --- a/packages/db/README.md +++ b/packages/db/README.md @@ -1,6 +1,6 @@ # DB -データベース管理パッケージ (`@next-admin/db`)。Prisma 7 を使用。 +データベース管理パッケージ (`@next-admin/db`) ## セットアップ手順 @@ -12,17 +12,6 @@ cp .env.template .env ``` -主な設定項目: - -| 変数 | デフォルト値 | 説明 | -| ------------------- | ---------------- | ---------------- | -| `DATABASE_HOST` | `localhost` | DBホスト | -| `DATABASE_PORT` | `55432` | DBポート | -| `DATABASE_USERNAME` | `admin` | DBユーザー | -| `DATABASE_PASSWORD` | `admin` | DBパスワード | -| `DATABASE_NAME` | `next_admin` | DB名 | -| `DATABASE_URL` | （上記から構成） | Prisma接続文字列 | - ### 2. Prisma クライアント生成 ```bash