Next.js 16 / React 19 へのアップグレード

view/next-project/eslint.config.mjs

@@ -0,0 +1,135 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
+import _import from 'eslint-plugin-import';
+import storybook from 'eslint-plugin-storybook';
+import unusedImports from 'eslint-plugin-unused-imports';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig([
+  ...nextVitals,
+  ...storybook.configs['flat/recommended'],
+
+  {
+    extends: [eslintPluginBetterTailwindcss.configs['recommended-warn']],
+    settings: {
+      'better-tailwindcss': {
+        // Tailwind CSS v4: CSS-based configuration entry file
+        entryPoint: 'src/styles/globals.css',
+      },
+    },
+  },
+
+  globalIgnores([
+    // Default ignores of eslint-config-next
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts',
+
+    // Project specific
+    'src/generated',
+    '**/*.config.js',
+    '**/*.config.ts',
+  ]),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      'unused-imports': unusedImports,
+      import: _import,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+
+        project: ['./tsconfig.json', './tsconfig.stories.json'],
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx'],
+        },
+
+        typescript: {},
+      },
+
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'unused-imports/no-unused-imports': 'error',
+
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            ['parent', 'sibling'],
+            'index',
+            'object',
+            'type',
+          ],
+
+          'newlines-between': 'always',
+
+          alphabetize: {
+            caseInsensitive: true,
+            order: 'asc',
+          },
+        },
+      ],
+
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      // Next.js (React 19) upgrade can introduce new react-hooks rules that are
+      // too noisy for the current codebase. Keep them as warnings for now.
+      'react-hooks/set-state-in-effect': 'warn',
+      'react-hooks/purity': 'warn',
+      'react-hooks/immutability': 'warn',
+
+      // Storybook plugin currently flags existing stories that import
+      // '@storybook/react'. Keep as warning until stories are migrated.
+      'storybook/no-renderer-packages': 'warn',
+
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+]);

view/next-project/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

view/next-project/package.json

@@ -7,8 +7,8 @@
     "test": "next test",
     "eject": "react-scripts eject",
     "dev": "next dev",
-    "lint": "next lint --dir src",
-    "lint:fix": "next lint --dir src --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix src",
     "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -28,12 +28,12 @@
     "fs": "^0.0.1-security",
     "lorem-ipsum": "^2.0.4",
     "minio": "^7.1.3",
-    "next": "^14.2.4",
+    "next": "16.1.1",
     "node-fetch": "^3.1.0",
     "nuqs": "^2.2.3",
     "pdf-lib": "^1.17.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.31.1",
     "react-icons": "^5.4.0",
@@ -46,6 +46,9 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
+    "@eslint/compat": "^2.0.1",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
     "@storybook/addon-essentials": "^8.1.3",
     "@storybook/addon-interactions": "^8.1.3",
     "@storybook/addon-links": "^8.1.3",
@@ -56,16 +59,18 @@
     "@storybook/test": "^8.1.3",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20.11.6",
-    "@types/react": "^18.0.25",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "eslint": "^8.28.0",
-    "eslint-config-next": "^14.2.4",
+    "@types/react": "19.2.8",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
     "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-better-tailwindcss": "^4.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-storybook": "^9.1.17",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "globals": "^17.0.0",
     "orval": "^7.3.0",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
@@ -88,9 +93,14 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 3 safari version"
     ]
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.2.8"
+    }
   }
 }