Update Example to Next.js 15 and ESLint 9

eslint.config.mjs

@@ -0,0 +1,125 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+});
+
+const eslintConfig = [
+	...compat.extends(
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended-type-checked",
+		"plugin:@typescript-eslint/stylistic-type-checked",
+		"plugin:import/recommended",
+		"next/core-web-vitals",
+		"next/typescript",
+		"prettier",
+	),
+	{
+		languageOptions: {
+			parser: tsParser,
+			parserOptions: {
+				project: "./tsconfig.json",
+				tsconfigRoot: __dirname,
+			},
+		},
+		rules: {
+			// sort imports
+			"import/order": [
+				"error",
+				{
+					"newlines-between": "always",
+					alphabetize: {
+						order: "asc",
+						orderImportKind: "asc",
+					},
+					groups: ["builtin", "external", "index", "internal", "sibling", "parent", "object", "type"],
+				},
+			],
+
+			// no let exports
+			"import/no-mutable-exports": "error",
+
+			"import/no-cycle": "error",
+			"import/no-default-export": "error",
+
+			// allow {} even though it's unsafe but comes handy
+			// @typescript-eslint/ban-types is deprecated
+			"@typescript-eslint/no-restricted-types": [
+				"error",
+				{
+					types: {
+						"{}": {
+							message: "it's unsafe but comes handy",
+						},
+					},
+				},
+			],
+
+			"@typescript-eslint/consistent-type-imports": [
+				"error",
+				{
+					prefer: "type-imports",
+					fixStyle: "inline-type-imports",
+					disallowTypeAnnotations: false,
+				},
+			],
+
+			"import/no-duplicates": ["error", { "prefer-inline": true }],
+
+			// false negatives
+			"import/namespace": ["off"],
+
+			// we allow empty interfaces
+			"no-empty-pattern": "off",
+			"@typescript-eslint/no-empty-interface": "off",
+
+			// we allow empty functions
+			"@typescript-eslint/no-empty-function": "off",
+
+			// we sometimes use async functions that don't await anything
+			"@typescript-eslint/require-await": "off",
+
+			// make sure to `await` inside try…catch
+			"@typescript-eslint/return-await": ["error", "in-try-catch"],
+
+			// allow unused vars prefixed with `_`
+			"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+
+			// numbers and booleans are fine in template strings
+			"@typescript-eslint/restrict-template-expressions": [
+				"error",
+				{ allowNumber: true, allowBoolean: true },
+			],
+
+			"@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: false }],
+
+			"no-restricted-imports": [
+				"error",
+				{
+					name: "next/router",
+					message: "Please use next/navigation instead.",
+				},
+			],
+		},
+	},
+	{
+		files: ["src/app/**/{page,layout,loading,route}.ts?(x)", "tailwind.config.ts"],
+		rules: {
+			"import/no-default-export": "off",
+		},
+	},
+	{
+		ignores: ["*.js", "*.jsx", "*.config.mjs"],
+	},
+];
+
+export default eslintConfig;

package.json

@@ -10,32 +10,34 @@
 		"prepare": "husky"
 	},
 	"dependencies": {
-		"@radix-ui/react-icons": "^1.3.0",
-		"class-variance-authority": "^0.7.0",
+		"@radix-ui/react-icons": "^1.3.2",
+		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"next": "14.2.5",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
-		"tailwind-merge": "^2.4.0",
+		"next": "15.1.4",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
+		"tailwind-merge": "^2.6.0",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"devDependencies": {
-		"@next/env": "14.2.5",
-		"@types/node": "20.14.12",
-		"@types/react": "18.3.3",
-		"@types/react-dom": "18.3.0",
-		"@typescript-eslint/eslint-plugin": "7.17.0",
-		"@typescript-eslint/parser": "7.17.0",
-		"autoprefixer": "10.4.19",
-		"eslint": "8.57.0",
-		"eslint-config-next": "14.2.5",
+		"@eslint/eslintrc": "^3.2.0",
+		"@eslint/js": "^9.18.0",
+		"@next/env": "15.1.4",
+		"@types/node": "20.17.12",
+		"@types/react": "19.0.6",
+		"@types/react-dom": "19.0.3",
+		"@typescript-eslint/eslint-plugin": "8.19.1",
+		"@typescript-eslint/parser": "8.19.1",
+		"autoprefixer": "10.4.20",
+		"eslint": "9.18.0",
+		"eslint-config-next": "15.1.4",
 		"eslint-config-prettier": "9.1.0",
-		"husky": "9.1.2",
-		"lint-staged": "15.2.7",
-		"postcss": "8.4.40",
-		"prettier": "3.3.3",
-		"prettier-plugin-tailwindcss": "0.6.5",
-		"tailwindcss": "3.4.7",
-		"typescript": "5.4.5"
+		"husky": "9.1.7",
+		"lint-staged": "15.3.0",
+		"postcss": "8.4.49",
+		"prettier": "3.4.2",
+		"prettier-plugin-tailwindcss": "0.6.9",
+		"tailwindcss": "3.4.17",
+		"typescript": "5.7.3"
 	}
 }