remove @chakra-ui/next-js and implement custom logic to fix issue with links not having the locale in hrefs

Author: pettinarip

package.json

@@ -20,7 +20,6 @@
     "markdown-checker": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/markdownChecker.ts"
   },
   "dependencies": {
-    "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.0",
     "@crowdin/crowdin-api-client": "^1.25.0",
     "@docsearch/react": "^3.5.2",

src/components/Link.tsx

@@ -1,13 +1,11 @@
+import NextLink, { type LinkProps as NextLinkProps } from "next/link"
 import { useRouter } from "next/router"
 import { RxExternalLink } from "react-icons/rx"
-import {
-  Link as NextLink,
-  type LinkProps as NextLinkProps,
-} from "@chakra-ui/next-js"
 import {
   forwardRef,
   Icon,
   Link as ChakraLink,
+  type LinkProps as ChakraLinkProps,
   type StyleProps,
   VisuallyHidden,
 } from "@chakra-ui/react"
@@ -30,7 +28,9 @@ type BaseProps = {
   customEventOptions?: MatomoEventOptions
 }
 
-export type LinkProps = BaseProps & Omit<NextLinkProps, "href">
+export type LinkProps = BaseProps &
+  ChakraLinkProps &
+  Omit<NextLinkProps, "as" | "legacyBehavior" | "passHref" | "href">
 
 /**
  * Link wrapper which handles:
@@ -57,11 +57,11 @@ export const BaseLink = forwardRef(function Link(
   }: LinkProps,
   ref
 ) {
-  let href = (to ?? hrefProp) as string
-
-  const { asPath, locale } = useRouter()
+  const { asPath } = useRouter()
   const { flipForRtl } = useRtlFlip()
 
+  let href = (to ?? hrefProp) as string
+
   const isActive = url.isHrefActive(href, asPath, isPartiallyActive)
   const isDiscordInvite = url.isDiscordInvite(href)
   const isPdf = url.isPdf(href)
@@ -142,8 +142,7 @@ export const BaseLink = forwardRef(function Link(
   }
 
   return (
-    <NextLink
-      locale={locale}
+    <ChakraLink
       onClick={() =>
         trackCustomEvent(
           customEventOptions ?? {
@@ -155,16 +154,15 @@ export const BaseLink = forwardRef(function Link(
         )
       }
       {...commonProps}
+      as={NextLink}
     >
       {children}
-    </NextLink>
+    </ChakraLink>
   )
 })
 
 const InlineLink = forwardRef((props: LinkProps, ref) => {
-  const { locale } = useRouter()
-
-  return <BaseLink data-inline-link ref={ref} locale={locale} {...props} />
+  return <BaseLink data-inline-link ref={ref} {...props} />
 })
 
 export default InlineLink

src/components/Staking/StakingHowSoloWorks.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-key */
-import { Link } from "@chakra-ui/next-js"
 import { Center } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"

src/components/Staking/StakingLaunchpadWidget.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react"
 import { useTranslation } from "next-i18next"
 import { FaTools } from "react-icons/fa"
-import { Link } from "@chakra-ui/next-js"
 import { Box, chakra, Flex } from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"

src/lib/utils/cx.ts

@@ -0,0 +1 @@
+export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(" ")

yarn.lock

@@ -1734,13 +1734,6 @@
     aria-hidden "^1.2.3"
     react-remove-scroll "^2.5.6"
 
-"@chakra-ui/next-js@^2.1.5":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/next-js/-/next-js-2.2.0.tgz#80959c19f7509802c21dd73e23c32c60d918e4c7"
-  integrity sha512-brCz0UEOlImX4Np2jDIaljZJkW6kiDSuXG5erxvYjZlklLhmti1zj0o1sSjt5yff1xndfgHoOJb+BYG5wx+vDg==
-  dependencies:
-    "@emotion/cache" "^11.11.0"
-
 "@chakra-ui/[email protected]":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-2.1.2.tgz#dda9095fba6a4b89212332db02831b94120da163"