build(deps): update latest

packages/blog/src/BlogPostContent.tsx

@@ -9,7 +9,7 @@ import rehypeSlug from "rehype-slug"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 
-import { Link } from "@repo/i18n/routing"
+import { Link } from "@repo/i18n/navigation"
 import "katex/dist/katex.min.css"
 import { BlogPostComments } from "./BlogPostComments.tsx"
 

packages/blog/src/BlogPosts.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@repo/i18n/routing"
+import { Link } from "@repo/i18n/navigation"
 import { Typography } from "@repo/ui/Design/Typography"
 import { Section, SectionContent } from "@repo/ui/Layout/Section"
 import { getISODate } from "@repo/utils/dates"

packages/i18n/package.json

@@ -6,6 +6,7 @@
   "exports": {
     "./translations/*.json": "./src/translations/*.json",
     "./messages.d.ts": "./src/messages.d.ts",
+    "./navigation": "./src/navigation.ts",
     "./request": "./src/request.ts",
     "./routing": "./src/routing.ts"
   },

packages/i18n/src/navigation.ts

@@ -0,0 +1,6 @@
+import { createNavigation } from "next-intl/navigation"
+
+import { routing } from "./routing.ts"
+
+export const { Link, redirect, usePathname, useRouter, getPathname, permanentRedirect } =
+  createNavigation(routing)

packages/i18n/src/request.ts

@@ -1,12 +1,13 @@
 import { hasLocale } from "next-intl"
 import { getRequestConfig } from "next-intl/server"
+import * as rootParams from "next/root-params"
 import { routing } from "./routing.ts"
 
 import { LOCALE_DEFAULT } from "@repo/utils/constants"
 import { deepMerge } from "@repo/utils/objects"
 
-export default getRequestConfig(async ({ requestLocale }) => {
-  const requested = await requestLocale
+export default getRequestConfig(async ({ locale: localeOverride }) => {
+  const requested = localeOverride ?? (await rootParams.locale())
   const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale
 
   const userMessages = (await import(`./translations/${locale}.json`)).default

packages/i18n/src/root-params.d.ts

@@ -0,0 +1 @@
+export function locale(): Promise<string | undefined>

packages/i18n/src/routing.ts

@@ -1,8 +1,5 @@
-import { createNavigation } from "next-intl/navigation"
-
 import { LOCALES, LOCALE_DEFAULT, LOCALE_PREFIX } from "@repo/utils/constants"
 import { defineRouting } from "next-intl/routing"
-import type { Locale } from "@repo/utils/constants"
 
 // Countries: https://github.com/umpirsky/country-list/blob/master/data/en/country.json
 // Country flag picture: https://purecatamphetamine.github.io/country-flag-icons/3x2/US.svg
@@ -11,17 +8,8 @@ import type { Locale } from "@repo/utils/constants"
 // Locale code is a combination of ISO 639-1 language code and ISO 3166-1 country code.
 // For example, `fr-FR` is a locale code for French language in France.
 
-export interface LocaleProps {
-  params: Promise<{
-    locale: Locale
-  }>
-}
-
 export const routing = defineRouting({
   locales: LOCALES,
   defaultLocale: LOCALE_DEFAULT,
   localePrefix: LOCALE_PREFIX,
 })
-
-export const { Link, redirect, usePathname, useRouter, getPathname, permanentRedirect } =
-  createNavigation(routing)

packages/i18n/tsconfig.json

@@ -2,6 +2,9 @@
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@total-typescript/ts-reset"]
+    "types": ["@total-typescript/ts-reset"],
+    "paths": {
+      "next/root-params": ["./src/root-params.d.ts"]
+    }
   }
 }

packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@repo/i18n/routing"
+import { Link } from "@repo/i18n/navigation"
 import { useTranslations } from "next-intl"
 import Image from "next/image"
 import { BirthDate } from "../Home/About/AboutList/BirthDate.tsx"

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

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/nextjs"
 import { expect, fn, userEvent, within } from "storybook/test"
 import { FaCheck } from "react-icons/fa"
 
-import type { ButtonLinkProps } from "./Button.tsx"
 import { Button } from "./Button.tsx"
 
 const meta = {
@@ -133,10 +132,10 @@ export const LinkWithIcons: Story = {
   render: (args) => {
     return (
       <ButtonContainer>
-        <Button leftIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
+        <Button leftIcon={<FaCheck size={18} />} {...args}>
           Link Left Icon
         </Button>
-        <Button rightIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
+        <Button rightIcon={<FaCheck size={18} />} {...args}>
           Link Right Icon
         </Button>
       </ButtonContainer>

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

@@ -1,5 +1,5 @@
 import { classNames } from "@repo/config-tailwind/classNames"
-import { Link as NextLink } from "@repo/i18n/routing"
+import { Link as NextLink } from "@repo/i18n/navigation"
 
 import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"

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

@@ -1,5 +1,5 @@
 import { classNames } from "@repo/config-tailwind/classNames"
-import { Link as NextLink } from "@repo/i18n/routing"
+import { Link as NextLink } from "@repo/i18n/navigation"
 import { FiExternalLink } from "react-icons/fi"
 
 export interface LinkProps extends React.ComponentProps<typeof NextLink> {

packages/ui/src/Errors/ErrorServer/ErrorServer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRouter } from "@repo/i18n/routing"
+import { useRouter } from "@repo/i18n/navigation"
 import { useTranslations } from "next-intl"
 import { useEffect, useTransition } from "react"
 import { Button } from "../../Design/Button/Button.tsx"

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { classNames } from "@repo/config-tailwind/classNames"
-import { usePathname, useRouter } from "@repo/i18n/routing"
+import { usePathname, useRouter } from "@repo/i18n/navigation"
 import { LOCALES } from "@repo/utils/constants"
 import { useLocale } from "next-intl"
 import { useEffect, useRef } from "react"

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

@@ -4,7 +4,7 @@ import { classNames } from "@repo/config-tailwind/classNames"
 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"
+import { useSyncExternalStore } from "react"
 
 export interface ThemeProviderProps extends React.PropsWithChildren {
   forcedTheme?: Theme
@@ -30,13 +30,19 @@ export interface UseThemeOutput {
   toggleTheme: () => void
 }
 
+const subscribeToNothing = (): (() => void) => {
+  return () => {}
+}
+const getClientSnapshot = (): boolean => {
+  return true
+}
+const getServerSnapshot = (): boolean => {
+  return false
+}
+
 export const useTheme = (): UseThemeOutput => {
   const { setTheme, theme: themeData } = useNextTheme()
-  const [isMounted, setIsMounted] = useState(false)
-
-  useEffect(() => {
-    setIsMounted(true)
-  }, [])
+  const isMounted = useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot)
 
   const theme = isMounted ? (themeData as Theme) : THEME_DEFAULT