refactor: remove next-i18next

package.json

@@ -89,7 +89,6 @@
     "mermaid": "10.1.0",
     "nanoid": "4.0.2",
     "next": "13.4.1",
-    "next-i18next": "^13.2.2",
     "nextjs-toploader": "^1.3.2",
     "node-id3": "^0.2.6",
     "pangu": "^4.0.7",

pnpm-lock.yaml

@@ -187,9 +187,6 @@ dependencies:
   next:
     specifier: 13.4.1
     version: 13.4.1(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
-  next-i18next:
-    specifier: ^13.2.2
-    version: 13.2.2(i18next@22.4.15)(next@13.4.1)(react-i18next@12.2.2)(react@18.2.0)
   nextjs-toploader:
     specifier: ^1.3.2
     version: 1.3.2(next@13.4.1)(react-dom@18.2.0)(react@18.2.0)
@@ -4758,13 +4755,6 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
 
-  /@types/hoist-non-react-statics@3.3.1:
-    resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
-    dependencies:
-      '@types/react': 18.2.6
-      hoist-non-react-statics: 3.3.2
-    dev: false
-
   /@types/js-cookie@2.2.7:
     resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
     dev: false
@@ -6673,11 +6663,6 @@ packages:
       browserslist: 4.21.5
     dev: true
 
-  /core-js@3.30.1:
-    resolution: {integrity: sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==}
-    requiresBuild: true
-    dev: false
-
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: true
@@ -9075,10 +9060,6 @@ packages:
     hasBin: true
     dev: true
 
-  /i18next-fs-backend@2.1.1:
-    resolution: {integrity: sha512-FTnj+UmNgT3YRml5ruRv0jMZDG7odOL/OP5PF5mOqvXud2vHrPOOs68Zdk6iqzL47cnnM0ZVkK2BAvpFeDJToA==}
-    dev: false
-
   /i18next-resources-to-backend@1.1.3:
     resolution: {integrity: sha512-iDJITrMHoKLUa3B2wippgH62yM4f4wCEofeTj55rML9i7QrMDGKdr8FGCnSNNxRQzvW4546Qx6v2/xY3dAhvUA==}
     dependencies:
@@ -10845,26 +10826,6 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /next-i18next@13.2.2(i18next@22.4.15)(next@13.4.1)(react-i18next@12.2.2)(react@18.2.0):
-    resolution: {integrity: sha512-t0WU6K+HJoq2nVQ0n6OiiEZja9GyMqtDSU74FmOafgk4ljns+iZ18bsNJiI8rOUXfFfkW96ea1N7D5kbMyT+PA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      i18next: ^22.0.6
-      next: '>= 12.0.0'
-      react: '>= 17.0.2'
-      react-i18next: ^12.2.0
-    dependencies:
-      '@babel/runtime': 7.21.0
-      '@types/hoist-non-react-statics': 3.3.1
-      core-js: 3.30.1
-      hoist-non-react-statics: 3.3.2
-      i18next: 22.4.15
-      i18next-fs-backend: 2.1.1
-      next: 13.4.1(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-i18next: 12.2.2(i18next@22.4.15)(react-dom@18.2.0)(react@18.2.0)
-    dev: false
-
   /next-pwa@5.6.0(@babel/core@7.21.8)(esbuild@0.17.18)(next@13.4.1)(webpack@5.82.0):
     resolution: {integrity: sha512-XV8g8C6B7UmViXU8askMEYhWwQ4qc/XqJGnexbLV68hzKaGHZDMtHsm2TNxFcbR7+ypVuth/wwpiIlMwpRJJ5A==}
     peerDependencies:

src/components/common/AchievementItem.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useState } from "react"
 
 import { Indicator } from "@mantine/core"
@@ -6,6 +5,7 @@ import { Indicator } from "@mantine/core"
 import { AchievementModal } from "~/components/common/AchievementModal"
 import { Image } from "~/components/ui/Image"
 import { useDate } from "~/hooks/useDate"
+import { useTranslation } from "~/lib/i18n/client"
 import type { AchievementSection } from "~/models/site.model"
 
 export const Badge = ({

src/components/common/AchievementModal.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import Tilt from "react-parallax-tilt"
 
 import { Modal, Stepper } from "@mantine/core"
@@ -8,6 +7,7 @@ import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
 import { useDate } from "~/hooks/useDate"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 import type { AchievementSection } from "~/models/site.model"
 import { useMintAchievement } from "~/queries/site"

src/components/common/CharacterCard.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useEffect, useState } from "react"
 
 import { FollowingButton } from "~/components/common/FollowingButton"
@@ -6,6 +5,7 @@ import { FollowingCount } from "~/components/common/FollowingCount"
 import { Titles } from "~/components/common/Titles"
 import { Avatar } from "~/components/ui/Avatar"
 import { useDate } from "~/hooks/useDate"
+import { useTranslation } from "~/lib/i18n/client"
 import type { ExpandedCharacter } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import * as siteModel from "~/models/site.model"

src/components/common/FollowingButton.tsx

@@ -1,4 +1,3 @@
-import { Trans, useTranslation } from "next-i18next"
 import { useEffect } from "react"
 import { toast } from "react-hot-toast"
 
@@ -6,6 +5,7 @@ import { Button } from "~/components/ui/Button"
 import type { Variant } from "~/components/ui/Button"
 import { UniLink } from "~/components/ui/UniLink"
 import { SITE_URL } from "~/lib/env"
+import { Trans, useTranslation } from "~/lib/i18n/client"
 import { ExpandedCharacter } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import {

src/components/common/FollowingCount.tsx

@@ -1,8 +1,8 @@
-import { useTranslation } from "next-i18next"
 import { useState } from "react"
 
 import { CharacterList } from "~/components/common/CharacterList"
 import { Button } from "~/components/ui/Button"
+import { useTranslation } from "~/lib/i18n/client"
 import {
   useGetSiteSubscriptions,
   useGetSiteToSubscriptions,

src/components/common/PatronButton.tsx

@@ -1,8 +1,8 @@
-import { useTranslation } from "next-i18next"
 import { useState } from "react"
 
 import { PatronModal } from "~/components/common/PatronModal"
 import { Button } from "~/components/ui/Button"
+import { useTranslation } from "~/lib/i18n/client"
 import { ExpandedCharacter } from "~/lib/types"
 import { cn } from "~/lib/utils"
 

src/components/common/PatronModal.tsx

@@ -1,5 +1,4 @@
 import confetti from "canvas-confetti"
-import { useTranslation } from "next-i18next"
 import { useEffect, useRef, useState } from "react"
 import { toast } from "react-hot-toast"
 
@@ -11,6 +10,7 @@ import { Button } from "~/components/ui/Button"
 import { Modal } from "~/components/ui/Modal"
 import { CSB_SCAN, MIRA_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 import { useGetTips, useTipCharacter } from "~/queries/site"
 

src/components/dashboard/DashboardLayout.server.tsx

@@ -1,16 +0,0 @@
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-
-import { languageDetector } from "~/lib/language-detector"
-
-export const getServerSideProps = async (ctx: any) => {
-  return {
-    props: {
-      ...(await serverSideTranslations(languageDetector(ctx), [
-        "common",
-        "dashboard",
-        "index",
-        "site",
-      ])),
-    },
-  }
-}

src/components/dashboard/DashboardMain.tsx

@@ -1,6 +1,5 @@
-import { useTranslation } from "next-i18next"
-
 import { useIsMobileLayout } from "~/hooks/useMobileLayout"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 export const DashboardMain: React.FC<{

src/components/dashboard/ImportPreview.tsx

@@ -1,8 +1,8 @@
 import type { NoteMetadata } from "crossbell.js"
-import { useTranslation } from "next-i18next"
 import { useState } from "react"
 
 import { useDate } from "~/hooks/useDate"
+import { useTranslation } from "~/lib/i18n/client"
 
 import { PageContent } from "../common/PageContent"
 

src/components/dashboard/PagesManager.tsx

@@ -1,5 +1,4 @@
 import { nanoid } from "nanoid"
-import { Trans, useTranslation } from "next-i18next"
 import Link from "next/link"
 import {
   useParams,
@@ -13,6 +12,7 @@ import { Menu } from "@headlessui/react"
 import { useQueryClient } from "@tanstack/react-query"
 
 import { useDate } from "~/hooks/useDate"
+import { Trans, useTranslation } from "~/lib/i18n/client"
 import { getPageVisibility } from "~/lib/page-helpers"
 import { readFiles } from "~/lib/read-files"
 import { setStorage } from "~/lib/storage"
@@ -48,7 +48,8 @@ export const PagesManager: React.FC<{
     [searchParams],
   )
 
-  const { t } = useTranslation(["dashboard", "site"])
+  const { t } = useTranslation("dashboard")
+  const { t: siteT } = useTranslation("site")
   const date = useDate()
 
   const pages = useGetPagesBySite({
@@ -355,7 +356,7 @@ export const PagesManager: React.FC<{
             onClick={pages.fetchNextPage as () => void}
             isLoading={pages.isFetchingNextPage}
           >
-            {t("load more", {
+            {siteT("load more", {
               name: t(
                 isPost
                   ? "post"
@@ -365,7 +366,6 @@ export const PagesManager: React.FC<{
                         : ""),
               ),
               count: (pages.data?.pages?.[0].count || 0) - currentLength,
-              ns: "site",
             })}
           </Button>
         )}

src/components/dashboard/PagesManagerBatchSelectActionTab.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useParams } from "next/navigation"
 import React, { useState } from "react"
 import toast from "react-hot-toast"
@@ -8,6 +7,7 @@ import { useQueryClient } from "@tanstack/react-query"
 
 import { type TabItem, Tabs } from "~/components/ui/Tabs"
 import { APP_NAME } from "~/lib/env"
+import { useTranslation } from "~/lib/i18n/client"
 import { delStorage, getStorage, setStorage } from "~/lib/storage"
 import { ExpandedNote } from "~/lib/types"
 import { useCreateOrUpdatePage, useDeletePage } from "~/queries/page"
@@ -23,7 +23,7 @@ export const PagesManagerBatchSelectActionTab: React.FC<{
   batchSelected: (string | number)[]
   setBatchSelected: (selected: string[]) => void
 }> = ({ isPost, isNotxLogContent, pages, batchSelected, setBatchSelected }) => {
-  const { t } = useTranslation(["dashboard", "site"])
+  const { t } = useTranslation("dashboard")
 
   const params = useParams()
   const subdomain = params?.subdomain as string

src/components/dashboard/PagesManagerMenu.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useParams, useRouter } from "next/navigation"
 import { FC, useEffect, useState } from "react"
 import toast from "react-hot-toast"
@@ -9,6 +8,7 @@ import { useQueryClient } from "@tanstack/react-query"
 import { useGetState } from "~/hooks/useGetState"
 import { APP_NAME } from "~/lib/env"
 import { getNoteSlugFromNote, getTwitterShareUrl } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { delStorage, getStorage, setStorage } from "~/lib/storage"
 import { ExpandedNote } from "~/lib/types"
 import { useCreateOrUpdatePage, useDeletePage } from "~/queries/page"
@@ -35,7 +35,7 @@ export const PagesManagerMenu: FC<{
   page: ExpandedNote
   onClick: () => void
 }> = ({ isPost, page, onClick: onClose }) => {
-  const { t } = useTranslation(["dashboard", "site"])
+  const { t } = useTranslation("dashboard")
 
   const isCrossbell = !page.metadata?.content?.sources?.includes("xlog")
   const router = useRouter()

src/components/dashboard/PublishButton.tsx

@@ -1,7 +1,8 @@
-import { useTranslation } from "next-i18next"
 import { useEffect, useRef, useState } from "react"
 import useOnClickOutside from "use-onclickoutside"
 
+import { useTranslation } from "~/lib/i18n/client"
+
 import { Button, ButtonGroup } from "../ui/Button"
 import { DeleteConfirmationModal } from "./DeleteConfirmationModal"
 

src/components/dashboard/SettingsLayout.tsx

@@ -1,9 +1,10 @@
-import { useTranslation } from "next-i18next"
 import { useParams, usePathname } from "next/navigation"
 import React from "react"
 
 import { useXSettingsModal } from "@crossbell/connect-kit"
 
+import { useTranslation } from "~/lib/i18n/client"
+
 import { type TabItem, Tabs } from "../ui/Tabs"
 import { DashboardMain } from "./DashboardMain"
 

src/components/main/MainLayout.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useRouter } from "next/navigation"
 
 import { Logo } from "~/components/common/Logo"
@@ -10,6 +9,7 @@ import {
   TWITTER_LINK,
 } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 import { ConnectButton } from "../common/ConnectButton"

src/components/site/SiteLayout.server.tsx

@@ -1,101 +0,0 @@
-import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-
-import { QueryClient, dehydrate } from "@tanstack/react-query"
-
-import { languageDetector } from "~/lib/language-detector"
-import { notFound } from "~/lib/server-side-props"
-import { PageVisibilityEnum } from "~/lib/types"
-import { fetchGetPage, prefetchGetPagesBySite } from "~/queries/page.server"
-import {
-  fetchGetSite,
-  prefetchGetSiteSubscriptions,
-  prefetchGetSiteToSubscriptions,
-} from "~/queries/site.server"
-
-export const getServerSideProps = async (
-  ctx: any,
-  queryClient: QueryClient,
-  options?: {
-    limit?: number
-    useStat?: boolean
-    skipPages?: boolean
-    preview?: boolean
-  },
-) => {
-  const domainOrSubdomain = ctx.params!.site as string
-  const pageSlug = ctx.params!.page as string
-  const tag = ctx.params!.tag as string
-  const site = await fetchGetSite(domainOrSubdomain, queryClient)
-
-  if (site?.characterId) {
-    await Promise.all([
-      prefetchGetSiteSubscriptions(
-        {
-          characterId: site.characterId,
-        },
-        queryClient,
-      ),
-      prefetchGetSiteToSubscriptions(
-        {
-          characterId: site.characterId,
-        },
-        queryClient,
-      ),
-      new Promise(async (resolve, reject) => {
-        if (options?.preview) {
-          // do nothing
-        } else if (pageSlug) {
-          try {
-            const page = await fetchGetPage(
-              {
-                characterId: site.characterId,
-                slug: pageSlug,
-                ...(options?.useStat && {
-                  useStat: true,
-                }),
-              },
-              queryClient,
-            )
-
-            if (
-              !page ||
-              new Date(page!.metadata?.content?.date_published || "") >
-                new Date()
-            ) {
-              reject(notFound())
-            }
-          } catch (error) {
-            reject(error)
-          }
-        } else {
-          if (!options?.skipPages) {
-            await prefetchGetPagesBySite(
-              {
-                characterId: site.characterId,
-                ...(options?.limit && { limit: options.limit }),
-                type: "post",
-                visibility: PageVisibilityEnum.Published,
-                ...(tag && { tags: [tag] }),
-                ...(options?.useStat && {
-                  useStat: true,
-                }),
-              },
-              queryClient,
-            )
-          }
-        }
-        resolve(null)
-      }),
-    ])
-  }
-
-  return {
-    props: {
-      ...(await serverSideTranslations(languageDetector(ctx), [
-        "common",
-        "site",
-      ])),
-      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
-    },
-  }
-}

src/components/ui/BoxRadio.tsx

@@ -1,5 +1,4 @@
 import { nanoid } from "nanoid"
-import { useTranslation } from "next-i18next"
 import React, {
   ChangeEvent,
   Dispatch,
@@ -10,6 +9,7 @@ import React, {
 } from "react"
 
 import { Input } from "~/components/ui/Input"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 export type RadioItem = {
@@ -23,7 +23,7 @@ export const BoxRadio: React.FC<{
   setValue: Dispatch<SetStateAction<string>>
   items: RadioItem[]
 }> = ({ value, setValue, items }) => {
-  const { t } = useTranslation(["common"])
+  const { t } = useTranslation("common")
   const randomId = useMemo(() => nanoid(), [])
   const [isCustom, setIsCustom] = useState(false)
 

src/components/ui/EditorToolbar.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { FC, memo, useCallback, useState } from "react"
 import { usePopper } from "react-popper"
 
@@ -6,6 +5,7 @@ import { EditorView } from "@codemirror/view"
 import { Popover } from "@headlessui/react"
 
 import { ICommand } from "~/editor"
+import { useTranslation } from "~/lib/i18n/client"
 
 import { Tooltip } from "./Tooltip"
 

src/models/home.model.ts

@@ -330,7 +330,7 @@ export const getShowcase = async () => {
     .toPromise()
 
   result.data?.characters?.forEach((site: any) => {
-    if (site.metadata.content) {
+    if (site.metadata?.content) {
       site.metadata.content.name = site.metadata?.content?.name || site.handle
     } else {
       site.metadata.content = {