Establish Next.js admin foundation with component architecture migration from Vue.js and Docker support

admin/.dockerignore

@@ -0,0 +1,35 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Testing
+coverage
+
+# Next.js
+.next
+out
+
+# Production
+build
+dist
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env*.local
+.env
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts

admin/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

admin/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "^types$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/components/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/styles/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

admin/Dockerfile

@@ -0,0 +1,11 @@
+# ベースイメージとして Node.js 22.13.0 を指定
+FROM node:22.13.0
+
+# 必要なツールをインストール
+RUN npm install -g pnpm
+
+# 作業ディレクトリを設定
+WORKDIR /app
+
+# コンテナ起動時に実行するデフォルトコマンド
+CMD ["pnpm", "run", "dev"]

admin/eslint.config.mjs

@@ -0,0 +1,57 @@
+// eslint.config.mjs
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat();
+
+const config = [
+  // 互換ユーティリティを使って従来の shareable config を読み込みます
+  ...compat.extends('next/core-web-vitals'),
+  ...compat.extends('next/typescript'),
+  ...compat.extends('plugin:tailwindcss/recommended'),
+  ...compat.extends('plugin:prettier/recommended'),
+  // 自分のカスタム設定
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: (await import('@typescript-eslint/parser')).default,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        process: 'readonly',
+        __dirname: 'readonly',
+        module: 'writable',
+        exports: 'writable',
+        require: 'readonly',
+        globalThis: 'readonly',
+        BigInt: 'readonly',
+      },
+    },
+    plugins: {
+      tailwindcss: (await import('eslint-plugin-tailwindcss')).default,
+    },
+    rules: {
+      'prettier/prettier': [
+        'error',
+        {
+          singleQuote: true,
+          semi: true,
+          tabWidth: 2,
+          trailingComma: 'es5',
+          bracketSpacing: true,
+          printWidth: 80,
+          arrowParens: 'always',
+        },
+      ],
+      'tailwindcss/no-custom-classname': 'off',
+      '@next/next/no-img-element': 'off',
+    },
+  },
+];
+
+export default config;

admin/next.config.ts

@@ -0,0 +1,79 @@
+// next.config.ts
+import type { NextConfig } from 'next';
+import type { RuleSetRule } from 'webpack';
+
+const apiConfig: {
+  [key: string]: {
+    SSR_API_URL: string;
+    NEXT_PUBLIC_API_URL: string;
+  };
+} = {
+  development: {
+    SSR_API_URL: 'http://api:3000',
+    NEXT_PUBLIC_API_URL: 'http://localhost:3000',
+  },
+  staging: {
+    SSR_API_URL: 'https://stg-group-manager-api.nutfes.net',
+    NEXT_PUBLIC_API_URL: 'https://stg-group-manager-api.nutfes.net',
+  },
+  production: {
+    SSR_API_URL: 'https://group-manager-api.nutfes.net',
+    NEXT_PUBLIC_API_URL: 'https://group-manager-api.nutfes.net',
+  },
+};
+
+const APP_ENV = process.env.APP_ENV || 'development';
+
+const { SSR_API_URL, NEXT_PUBLIC_API_URL } =
+  apiConfig[APP_ENV] || apiConfig.development;
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  reactStrictMode: true,
+  env: {
+    SSR_API_URL,
+    NEXT_PUBLIC_API_URL,
+  },
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  },
+  webpack(config) {
+    // 既存の SVG を処理するルールを取得
+    const rules = config.module.rules as RuleSetRule[];
+    const fileLoaderRule = rules.find(
+      (rule): rule is RuleSetRule =>
+        rule.test instanceof RegExp && rule.test.test('.svg')
+    );
+    if (fileLoaderRule) {
+      config.module.rules.push(
+        // *.svg?url の場合、既存のファイルローダールールを利用
+        {
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          resourceQuery: /url/, // 例: import iconUrl from './icon.svg?url'
+        },
+        // その他の *.svg は @svgr/webpack を利用して React コンポーネント化
+        {
+          test: /\.svg$/i,
+          issuer: fileLoaderRule.issuer,
+          resourceQuery: { not: [/url/] }, // ?url が付かない場合
+          use: ['@svgr/webpack'],
+        }
+      );
+
+      // 既存のファイルローダールールから *.svg を除外
+      fileLoaderRule.exclude = /\.svg$/i;
+    }
+
+    return config;
+  },
+};
+
+export default nextConfig;

admin/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint-fix": "eslint src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "fmt": "prettier --write **/*.{js,jsx,ts,tsx,css,scss}",
+    "fmt:warn": "prettier --l **/*.{js,jsx,ts,tsx,css,scss}"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "axios": "^1.8.3",
+    "camelcase-keys": "^9.1.3",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.4.2",
+    "next": "15.0.3",
+    "next-auth": "^4.24.11",
+    "process": "^0.11.10",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-hook-form": "^7.54.2",
+    "react-icons": "^5.4.0",
+    "react-toastify": "^11.0.5",
+    "snakecase-keys": "^8.0.1",
+    "swr": "^2.3.3",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@next/eslint-plugin-next": "^15.2.4",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^20.17.24",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "eslint": "^9",
+    "eslint-config-next": "15.0.3",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "postcss": "^8",
+    "prettier": "^3.5.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "webpack": "^5.98.0"
+  },
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
+}