upgrade to next 16

.prettierignore

@@ -2,3 +2,4 @@ pnpm-lock.yaml
 .cache/
 .contentlayer/
 .next/
+next-env.d.ts

contentlayer.config.ts

@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files"
+import { defineDocumentType, makeSource } from "contentlayer2/source-files"
 import { remarkHeadingId } from "remark-custom-heading-id"
 import remarkGfm from "remark-gfm"
 import rehypeMdxCodeProps from "rehype-mdx-code-props"

eslint.config.mjs

@@ -1,18 +1,19 @@
 // @ts-check
 import tseslint from "typescript-eslint"
-import { FlatCompat } from "@eslint/eslintrc"
+import nextConfig from "eslint-config-next"
 import eslintPluginJsxA11y from "eslint-plugin-jsx-a11y"
 import eslintPluginReact from "eslint-plugin-react"
 
-const compat = new FlatCompat({
-  baseDirectory: import.meta.dirname,
-})
-
 export default tseslint.config(
+  {
+    ignores: [".next/**", ".contentlayer/**", "public/**", "next-env.d.ts"],
+  },
+
   tseslint.configs.recommendedTypeChecked,
 
-  ...compat.config({
-    extends: ["next"],
+  ...nextConfig,
+
+  {
     rules: {
       // react
       "react/prop-types": "off",
@@ -29,8 +30,13 @@ export default tseslint.config(
 
       // next
       "@next/next/no-img-element": "off",
+
+      // React Compiler rules added in eslint-plugin-react-hooks 7 (via eslint-config-next 16).
+      // Existing components predate them; revisit when refactoring those effects.
+      "react-hooks/set-state-in-effect": "off",
+      "react-hooks/static-components": "off",
     },
-  }),
+  },
 
   // @ts-expect-error eslintPluginReact.configs.flat, but runtime is always defined
   eslintPluginReact.configs.flat["jsx-runtime"],
@@ -40,6 +46,8 @@ export default tseslint.config(
       reportUnusedDisableDirectives: "error",
     },
     languageOptions: {
+      // eslint-config-next sets its own parser; type-aware rules need this one
+      parser: tseslint.parser,
       parserOptions: {
         projectService: true,
         tsconfigRootDir: import.meta.dirname,

next-env.d.ts

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

next.config.ts

@@ -1,19 +1,13 @@
 import type { NextConfig } from "next"
-import { withContentlayer } from "next-contentlayer"
 import withBundleAnalyzer from "@next/bundle-analyzer"
 
 const nextConfig: NextConfig = {
-  eslint: {
+  typescript: {
     /**
-     * Now eslint requires typecheck so we have to run build before executing lint
-     * These check are performed via `.github/workflows/ci.yml` action
+     * Type checks run separately via `pnpm typecheck:ci` in `.github/workflows/ci.yml`
      *
      * @see https://github.com/react-hook-form/documentation/pull/1107
      */
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    /** @see `eslint.ignoreDuringBuilds` comment */
     ignoreBuildErrors: true,
   },
   reactStrictMode: true,
@@ -34,4 +28,4 @@ const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-export default bundleAnalyzer(withContentlayer(nextConfig))
+export default bundleAnalyzer(nextConfig)

package.json

@@ -10,10 +10,10 @@
     "@next/mdx": "15.1.0",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
-    "contentlayer": "^0.3.4",
+    "contentlayer2": "0.5.8",
     "little-state-machine": "^4.8.1",
-    "next": "15.5.27",
-    "next-contentlayer": "^0.3.4",
+    "next": "16.4.2",
+    "next-contentlayer2": "0.5.8",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
@@ -24,14 +24,14 @@
     "react-simple-animate": "^3.5.3",
     "react-simple-img": "3.0.0",
     "react-sortablejs": "1.5.1",
-    "rehype-mdx-code-props": "^1.0.0",
-    "remark-custom-heading-id": "^1.0.1",
-    "remark-emoji": "^3.1.2",
-    "remark-gfm": "^3.0.1",
+    "rehype-mdx-code-props": "^3.0.1",
+    "remark-custom-heading-id": "^2.0.0",
+    "remark-emoji": "^5.0.2",
+    "remark-gfm": "^4.0.1",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "15.1.0",
+    "@next/bundle-analyzer": "16.4.2",
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
     "@types/eslint__eslintrc": "2.1.2",
     "@types/node": "20.17.10",
@@ -40,34 +40,36 @@
     "@types/react-helmet": "^6.1.11",
     "cross-env": "^7.0.3",
     "eslint": "9.17.0",
-    "eslint-config-next": "15.1.0",
+    "eslint-config-next": "16.4.2",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "8.18.1"
+    "typescript-eslint": "8.72.0"
   },
   "keywords": [
     "react-hook-form",
     "form-validation"
   ],
   "license": "MIT",
   "scripts": {
-    "analyze": "cross-env ANALYZE=true next build",
-    "build": "next build",
-    "dev": "next dev",
+    "analyze": "contentlayer2 build && cross-env ANALYZE=true next build --webpack",
+    "build": "contentlayer2 build && next build",
+    "dev": "contentlayer2 build && pnpm run --parallel \"/^dev:/\"",
+    "dev:content": "contentlayer2 dev",
+    "dev:next": "next dev",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
-    "lint:ci": "next build --no-lint && next lint",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "lint:ci": "contentlayer2 build && next typegen && eslint src",
     "now-build": "pnpm run build",
     "start": "next start",
     "typecheck": "tsc --noEmit",
-    "typecheck:ci": "next build --no-lint && tsc --noEmit",
+    "typecheck:ci": "contentlayer2 build && next typegen && tsc --noEmit",
     "prepare": "husky install"
   },
   "lint-staged": {