build(deps): update to Next.js v16 + use image digests instead of tags

Ref:
- https://docs.docker.com/dhi/core-concepts/digests/
- https://github.com/goldbergyoni/nodebestpractices/blob/master/sections/docker/image-tags.md
- https://emmer.dev/blog/what-is-a-docker-digest/

.github/workflows/chromatic.yml

@@ -18,23 +18,23 @@ jobs:
       NEXT_TELEMETRY_DISABLED: "1"
       STORYBOOK_DISABLE_TELEMETRY: "1"
     steps:
-      - uses: "actions/checkout@v5.0.0"
+      - uses: "actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8" # v5.0.0
         with:
           fetch-depth: 0
 
-      - uses: "pnpm/action-setup@v4.1.0"
+      - uses: "pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda" # v4.1.0
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.4.0"
+        uses: "actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903" # v6.0.0
         with:
-          node-version: "24.x"
+          node-version: "24.10.0"
           cache: "pnpm"
 
       - name: "Install dependencies"
         run: "pnpm install --frozen-lockfile"
 
       - name: "Run Chromatic"
-        uses: "chromaui/action@latest"
+        uses: "chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6" # latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: "apps/storybook"

.github/workflows/ci.yml

@@ -18,14 +18,14 @@ jobs:
       NEXT_TELEMETRY_DISABLED: "1"
       STORYBOOK_DISABLE_TELEMETRY: "1"
     steps:
-      - uses: "actions/checkout@v5.0.0"
+      - uses: "actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8" # v5.0.0
 
-      - uses: "pnpm/action-setup@v4.1.0"
+      - uses: "pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda" # v4.1.0
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.4.0"
+        uses: "actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903" # v6.0.0
         with:
-          node-version: "24.x"
+          node-version: "24.10.0"
           cache: "pnpm"
 
       - name: "Install dependencies"

.vscode/react.code-snippets

@@ -4,7 +4,6 @@
     "prefix": "rfc",
     "body": [
       "export interface ${1:ComponentName}Props {}",
-      "",
       "export const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = () => {",
       "  return (",
       "    <div>",

CONTRIBUTING.md

@@ -28,7 +28,7 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= v24.0.0 [(`nvm install 24`)](https://nvm.sh)
-- [pnpm](https://pnpm.io/) v10.15.1 [(`npm install --global corepack@0.34.0 && corepack enable`)](https://github.com/nodejs/corepack)
+- [pnpm](https://pnpm.io/) v10.20.0 [(`npm install --global corepack@0.34.1 && corepack enable`)](https://github.com/nodejs/corepack)
 - [Docker](https://www.docker.com/)
 
 ### Installation

apps/storybook/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

apps/website/Dockerfile

@@ -1,7 +1,7 @@
-FROM node:24.7.0-slim AS node-pnpm
+FROM node:24.10.0-slim@sha256:b8d2197aff9129d16c801a3e3e1b2a873c4946480f5a310f38056df2268c38d9 AS node-pnpm
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install --global corepack@0.34.0 && corepack enable
+RUN npm install --global corepack@0.34.1 && corepack enable
 ENV TURBO_TELEMETRY_DISABLED=1
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV DO_NOT_TRACK=1
@@ -9,7 +9,7 @@ WORKDIR /usr/src/app
 
 FROM node-pnpm AS builder
 COPY ./ ./
-RUN pnpm install --global turbo@2.5.6
+RUN pnpm install --global turbo@2.6.0
 RUN turbo prune @repo/website --docker
 
 FROM node-pnpm AS installer
@@ -23,7 +23,7 @@ COPY --from=builder /usr/src/app/out/full/ ./
 COPY turbo.json turbo.json
 
 ARG VERSION="0.0.0-develop"
-RUN pnpm install --global replace-in-files-cli@3.0.0
+RUN pnpm install --global replace-in-files-cli@4.0.0
 RUN VERSION_STRIPPED=${VERSION#v} && replace-in-files --regex='version": *"[^"]*' --replacement='"version": "'"$VERSION_STRIPPED"'"' '**/package.json' '!**/node_modules/**'
 RUN pnpm --filter=@repo/website... exec turbo run build
 

apps/website/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

apps/website/next.config.ts

@@ -11,12 +11,12 @@ const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    turbopackFileSystemCacheForDev: true,
+  },
 }
 
 const withNextIntl = createNextIntlPlugin({

apps/website/package.json

@@ -7,11 +7,11 @@
     "#*": "./*"
   },
   "scripts": {
-    "dev": "next dev --port 3000 --turbopack",
+    "dev": "next dev --port 3000",
-    "build": "next build --turbopack",
+    "build": "next build",
     "start": "next start --port 3000",
     "typegen": "next typegen",
-    "lint:eslint": "eslint . --max-warnings 0",
+    "lint:eslint": "eslint app --max-warnings 0",
     "lint:typescript": "next typegen && tsc --noEmit"
   },
   "dependencies": {

apps/website/tsconfig.json

@@ -4,9 +4,6 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["@total-typescript/ts-reset", "@repo/i18n/messages.d.ts"],
     "allowJs": true,
-    "paths": {
-      "#*": ["./*"]
-    },
     "plugins": [
       {
         "name": "next"

configs/config-eslint/eslint.config.js

@@ -2,42 +2,32 @@ import nextPlugin from "@next/eslint-plugin-next"
 import configConventions from "eslint-config-conventions"
 import importXPlugin from "eslint-plugin-import-x"
 import reactPlugin from "eslint-plugin-react"
-import reactHooksPlugin from "eslint-plugin-react-hooks"
+import reactHooks from "eslint-plugin-react-hooks"
-import typescriptESLint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
 
-export default typescriptESLint.config(
+export default defineConfig(
   ...configConventions,
-  reactHooksPlugin.configs.recommended,
   reactPlugin.configs.flat.recommended,
-  {
+  globalIgnores(["**/kysely.config.ts"]),
-    ignores: [
-      ".next",
-      "**/next.config.ts",
-      "**/eslint.config.js",
-      "**/tailwind.config.js",
-      "**/postcss.config.js",
-      "**/kysely.config.ts",
-    ],
-  },
   {
     name: "config-eslint",
     settings: {
       react: {
-        version: "19.1.1",
+        version: "19.2.0",
       },
     },
     plugins: {
       "@next/next": nextPlugin,
       "import-x": importXPlugin,
+      "react-hooks": reactHooks,
     },
     rules: {
       ...nextPlugin.configs.recommended.rules,
       ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactHooks.configs.recommended.rules,
       "@next/next/no-html-link-for-pages": "off",
       "@next/next/no-img-element": "off",
 
-      "react-hooks/react-compiler": "error",
-
       "react/jsx-no-target-blank": "off",
       "react/no-unknown-property": "off",
       "react/react-in-jsx-scope": "off",

configs/config-eslint/index.d.ts

@@ -1,7 +1,5 @@
-import type typescriptESLint from "typescript-eslint"
+import type { defineConfig } from "eslint/config"
 
-declare const eslintConfigConventions: ReturnType<
+declare const eslintConfig: ReturnType<typeof defineConfig>
-  typeof typescriptESLint.config
->
 
-export default eslintConfigConventions
+export default eslintConfig

configs/config-tailwind/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

configs/config-tailwind/styles.css

@@ -48,7 +48,7 @@
 
   q,
   blockquote {
-    @apply italic tracking-wider;
+    @apply tracking-wider italic;
   }
   blockquote {
     @apply border-gray-lighter border-l-4 pl-3 italic;

configs/config-typescript/tsconfig.json

@@ -17,6 +17,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "allowImportingTsExtensions": true,
+    "allowArbitraryExtensions": true,
     "skipLibCheck": true,
     "jsx": "preserve",
     "incremental": false,

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0-develop",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
+  "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd",
   "engines": {
     "node": ">=24.0.0"
   },

packages/blog/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

packages/blog/package.json

@@ -17,7 +17,6 @@
     "@repo/utils": "workspace:*",
     "@repo/i18n": "workspace:*",
     "@repo/ui": "workspace:*",
-    "@repo/react-hooks": "workspace:*",
     "@giscus/react": "catalog:",
     "@shikijs/rehype": "catalog:",
     "@mdx-js/mdx": "catalog:",

packages/i18n/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

packages/react-hooks/eslint.config.js

@@ -1,13 +0,0 @@
-import typescriptESLint from "typescript-eslint"
-import config from "@repo/config-eslint"
-
-export default typescriptESLint.config(...config, {
-  files: ["**/*.ts", "**/*.tsx"],
-  languageOptions: {
-    parser: typescriptESLint.parser,
-    parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})

packages/react-hooks/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "@repo/react-hooks",
-  "version": "0.0.0-develop",
-  "private": true,
-  "type": "module",
-  "exports": {
-    "./useBoolean": "./src/useBoolean.ts",
-    "./useIsMounted": "./src/useIsMounted.ts"
-  },
-  "scripts": {
-    "lint:eslint": "eslint src --max-warnings 0",
-    "lint:typescript": "tsc --noEmit"
-  },
-  "dependencies": {
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
-  "devDependencies": {
-    "@repo/config-eslint": "workspace:*",
-    "@repo/config-typescript": "workspace:*",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "@total-typescript/ts-reset": "catalog:",
-    "eslint": "catalog:",
-    "playwright": "catalog:",
-    "typescript": "catalog:",
-    "typescript-eslint": "catalog:"
-  }
-}

packages/react-hooks/src/useIsMounted.ts

@@ -1,15 +0,0 @@
-import { useEffect, useState } from "react"
-
-export interface UseIsMountedOutput {
-  isMounted: boolean
-}
-
-export const useIsMounted = (): UseIsMountedOutput => {
-  const [isMounted, setIsMounted] = useState(false)
-
-  useEffect(() => {
-    setIsMounted(true)
-  }, [])
-
-  return { isMounted }
-}

packages/react-hooks/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "@repo/config-typescript/tsconfig.json",
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@total-typescript/ts-reset"]
-  }
-}

packages/ui/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

packages/ui/package.json

@@ -30,7 +30,6 @@
     "@repo/config-tailwind": "workspace:*",
     "@repo/utils": "workspace:*",
     "@repo/i18n": "workspace:*",
-    "@repo/react-hooks": "workspace:*",
     "cva": "catalog:",
     "next": "catalog:",
     "next-intl": "catalog:",

packages/ui/src/Design/Button/Button.tsx

@@ -7,7 +7,7 @@ import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"
 
 const buttonVariants = cva({
-  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
       solid: "bg-primary hover:bg-primary/80 text-white",

packages/ui/src/Design/Link/Link.tsx

@@ -17,7 +17,7 @@ export const Link: React.FC<LinkProps> = (props) => {
   return (
     <NextLink
       className={classNames(
-        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
         className,
       )}
       target={target}

packages/ui/src/Design/Typography/Typography.tsx

@@ -11,8 +11,8 @@ const typographyVariants = cva({
       h4: "text-primary dark:text-primary-dark text-xl font-semibold",
       h5: "text-primary dark:text-primary-dark text-xl font-medium",
       h6: "text-primary dark:text-primary-dark text-lg font-medium",
-      text1: "break-words text-base",
+      text1: "text-base break-words",
-      text2: "break-words text-sm",
+      text2: "text-sm break-words",
     },
   },
 })

packages/ui/src/Layout/Header/Locales/Locales.tsx

@@ -6,9 +6,9 @@ import { LOCALES } from "@repo/utils/constants"
 import { useLocale } from "next-intl"
 import { useEffect, useRef } from "react"
 
-import { useBoolean } from "@repo/react-hooks/useBoolean"
 import { Arrow } from "./Arrow.tsx"
 import { LocaleFlag } from "./LocaleFlag.tsx"
+import { useBoolean } from "../../../hooks/useBoolean.ts"
 
 export interface LocalesProps {}
 

packages/ui/src/Layout/Header/SwitchTheme.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { classNames } from "@repo/config-tailwind/classNames"
-import { useIsMounted } from "@repo/react-hooks/useIsMounted"
 import type { Theme } from "@repo/utils/constants"
 import { THEME_DEFAULT } from "@repo/utils/constants"
 import {
   ThemeProvider as NextThemeProvider,
   useTheme as useNextTheme,
 } from "next-themes"
+import { useEffect, useState } from "react"
 
 export interface ThemeProviderProps extends React.PropsWithChildren {
   forcedTheme?: Theme
@@ -35,7 +35,12 @@ export interface UseThemeOutput {
 
 export const useTheme = (): UseThemeOutput => {
   const { setTheme, theme: themeData } = useNextTheme()
-  const { isMounted } = useIsMounted()
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setIsMounted(true)
+  }, [])
 
   const theme = isMounted ? (themeData as Theme) : THEME_DEFAULT
 
@@ -57,7 +62,7 @@ export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
 
   return (
     <div className="flex items-center justify-center" onClick={toggleTheme}>
-      <div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
+      <div className="relative inline-block cursor-pointer touch-pan-x border-0 bg-transparent p-0 select-none">
         <div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
           <div
             className={classNames(

packages/ui/src/Layout/Section/Section.tsx

@@ -75,7 +75,7 @@ export const SectionContent: React.FC<SectionContentProps> = (props) => {
   return (
     <div
       className={classNames(
-        "size-full max-w-full break-words px-6 py-4 sm:px-16",
+        "size-full max-w-full px-6 py-4 break-words sm:px-16",
         {
           "shadow-light dark:shadow-dark max-w-full rounded-2xl border border-solid border-black":
             shadowContainer,

packages/utils/eslint.config.js

@@ -1,7 +1,8 @@
 import typescriptESLint from "typescript-eslint"
+import { defineConfig } from "eslint/config"
 import config from "@repo/config-eslint"
 
-export default typescriptESLint.config(...config, {
+export default defineConfig(...config, {
   files: ["**/*.ts", "**/*.tsx"],
   languageOptions: {
     parser: typescriptESLint.parser,

pnpm-workspace.yaml

@@ -7,30 +7,30 @@ catalogMode: "strict"
 
 catalog:
   # Turborepo
-  "turbo": "2.5.6"
+  "turbo": "2.6.0"
 
   # TypeScript
-  "typescript": "5.9.2"
+  "typescript": "5.9.3"
   "@total-typescript/ts-reset": "0.6.1"
-  "@types/node": "24.3.1"
+  "@types/node": "24.9.2"
 
   # Utils
-  "mime": "4.0.7"
+  "mime": "4.1.0"
 
   # React.js/Next.js
-  "next": &next "15.5.2"
+  "next": &next "16.0.1"
-  "next-intl": "4.3.7"
+  "next-intl": "4.4.0"
   "next-themes": "0.4.6"
-  "react": "19.1.1"
+  "react": "19.2.0"
-  "react-dom": "19.1.1"
+  "react-dom": "19.2.0"
-  "@types/react": "19.1.12"
+  "@types/react": "19.2.2"
-  "@types/react-dom": "19.1.9"
+  "@types/react-dom": "19.2.2"
   "react-icons": "5.5.0"
 
   # Blog
   "@giscus/react": "3.1.0"
   "gray-matter": "4.0.3"
-  "katex": "0.16.22"
+  "katex": "0.16.25"
   "next-mdx-remote": "5.0.0"
   "@mdx-js/mdx": "3.1.1"
   "rehype-katex": "7.0.1"
@@ -47,46 +47,46 @@ catalog:
   "markdownlint-rule-relative-links": "4.2.0"
 
   # ESLint
-  "globals": "16.3.0"
+  "globals": "16.4.0"
-  "typescript-eslint": "8.43.0"
+  "typescript-eslint": "8.46.2"
-  "eslint": "9.35.0"
+  "eslint": "9.39.0"
-  "eslint-config-conventions": "20.2.0"
+  "eslint-config-conventions": "21.1.0"
   "eslint-plugin-promise": "7.2.1"
-  "eslint-plugin-unicorn": "61.0.2"
+  "eslint-plugin-unicorn": "62.0.0"
   "eslint-plugin-import-x": "4.16.1"
   "@next/eslint-plugin-next": *next
   "eslint-plugin-react": "7.37.5"
-  "eslint-plugin-react-hooks": "6.0.0-rc.1"
+  "eslint-plugin-react-hooks": "7.0.1"
 
   # Prettier
   "prettier": "3.6.2"
-  "prettier-plugin-tailwindcss": "0.6.14"
+  "prettier-plugin-tailwindcss": "0.7.1"
-  "editorconfig-checker": "6.1.0"
+  "editorconfig-checker": "6.1.1"
 
   # Storybook
-  "storybook": &storybook "9.1.5"
+  "storybook": &storybook "10.0.2"
   "@storybook/addon-docs": *storybook
   "@storybook/addon-a11y": *storybook
   "@storybook/nextjs": *storybook
   "@storybook/addon-themes": *storybook
-  "@storybook/test-runner": "0.23.0"
+  "@storybook/test-runner": "0.24.1"
-  "@chromatic-com/storybook": "4.1.1"
+  "@chromatic-com/storybook": "4.1.2"
-  "chromatic": "13.1.4"
+  "chromatic": "13.3.3"
 
   # Testing
-  "playwright": &playwright "1.55.0"
+  "playwright": &playwright "1.56.1"
   "@playwright/test": *playwright
-  "start-server-and-test": "2.1.0"
+  "start-server-and-test": "2.1.2"
 
   # CSS
   "postcss": "8.5.6"
-  "@tailwindcss/postcss": "4.1.13"
+  "@tailwindcss/postcss": "4.1.16"
-  "@tailwindcss/typography": "0.5.16"
+  "@tailwindcss/typography": "0.5.19"
-  "tailwindcss": "4.1.13"
+  "tailwindcss": "4.1.16"
   "tailwind-merge": "3.3.1"
   "clsx": "2.1.1"
   "cva": "1.0.0-beta.4"
-  "@fontsource/montserrat": "5.2.7"
+  "@fontsource/montserrat": "5.2.8"
 
 onlyBuiltDependencies:
   - "@swc/core"

turbo.json

@@ -1,5 +1,6 @@
 {
   "$schema": "./node_modules/turbo/schema.json",
+  "noUpdateNotifier": true,
   "ui": "tui",
   "tasks": {
     "build": {