♻️ Remove references to next-i18next (#1597)

apps/landing/package.json

@@ -25,10 +25,10 @@
     "gray-matter": "^4.0.3",
     "i18next": "^24.2.2",
     "i18next-icu": "^2.3.0",
-    "intl-messageformat": "^10.3.4",
+    "i18next-resources-to-backend": "^1.2.1",
+    "intl-messageformat": "^10.7.15",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.9",
-    "next-i18next": "^13.0.3",
     "next-mdx-remote": "^5.0.0",
     "next-seo": "^6.1.0",
     "react-i18next": "^15.4.1",

apps/landing/src/app/[locale]/footer.tsx

@@ -20,9 +20,9 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 
-import { Trans } from "@/components/trans";
+import { Trans } from "@/i18n/client/trans";
+import { useTranslation } from "@/i18n/client/use-translation";
 
 const LanguageSelect = () => {
   const router = useRouter();

apps/landing/src/app/[locale]/layout.tsx

@@ -17,7 +17,7 @@ import Link from "next/link";
 import { Trans } from "react-i18next/TransWithoutContext";
 
 import { sans } from "@/fonts/sans";
-import { I18nProvider } from "@/i18n/client";
+import { I18nProvider } from "@/i18n/client/i18n-provider";
 import { getTranslation } from "@/i18n/server";
 import { linkToApp } from "@/lib/linkToApp";
 

apps/landing/src/app/[locale]/pricing/pricing-table.tsx

@@ -18,7 +18,7 @@ import Link from "next/link";
 import React from "react";
 import { Trans } from "react-i18next/TransWithoutContext";
 
-import { useTranslation } from "@/i18n/client";
+import { useTranslation } from "@/i18n/client/use-translation";
 import { linkToApp } from "@/lib/linkToApp";
 
 export function PriceTables() {

apps/landing/src/components/error-page.tsx

@@ -3,9 +3,10 @@
 import { Button } from "@rallly/ui/button";
 import { FileSearchIcon } from "lucide-react";
 import Link from "next/link";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { useTranslation } from "@/i18n/client/use-translation";
+
 export interface ComponentProps {
   icon?: React.ReactNode;
   title: string;

apps/landing/src/components/home/hero.tsx

@@ -8,8 +8,8 @@ import Image from "next/image";
 import Link from "next/link";
 import * as React from "react";
 
-import { Trans } from "@/components/trans";
 import { handwritten } from "@/fonts/handwritten";
+import { Trans } from "@/i18n/client/trans";
 import { linkToApp } from "@/lib/linkToApp";
 
 const Screenshot = () => {

apps/landing/src/components/marketing.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import { Trans } from "@/components/trans";
+import { Trans } from "@/i18n/client/trans";
 
 // export const UsedBy = () => {
 //   return (

apps/landing/src/i18n/client/i18n-provider.tsx

@@ -1,17 +1,12 @@
 "use client";
-import type { Namespace } from "i18next";
 import i18next from "i18next";
 import ICU from "i18next-icu";
 import resourcesToBackend from "i18next-resources-to-backend";
 import React from "react";
-import {
-  I18nextProvider,
-  initReactI18next,
-  useTranslation as useTranslationOrg,
-} from "react-i18next";
+import { I18nextProvider, initReactI18next } from "react-i18next";
 import { useAsync } from "react-use";
 
-import { defaultNS, getOptions } from "./settings";
+import { defaultNS, getOptions } from "../settings";
 
 async function initTranslations(lng: string) {
   const i18n = i18next
@@ -20,7 +15,7 @@ async function initTranslations(lng: string) {
     .use(
       resourcesToBackend(
         (language: string, namespace: string) =>
-          import(`../../public/locales/${language}/${namespace}.json`),
+          import(`../../../public/locales/${language}/${namespace}.json`),
       ),
     );
   await i18n.init(getOptions(lng));
@@ -28,10 +23,6 @@ async function initTranslations(lng: string) {
   return i18n;
 }
 
-export function useTranslation(ns?: Namespace) {
-  return useTranslationOrg(ns);
-}
-
 export function I18nProvider({
   locale,
   children,

apps/landing/src/i18n/client/trans.tsx

@@ -1,4 +1,5 @@
-import { Trans as BaseTrans, useTranslation } from "next-i18next";
+"use client";
+import { Trans as BaseTrans, useTranslation } from "react-i18next";
 
 type TransWithContextProps = Omit<React.ComponentProps<typeof BaseTrans>, "t">;
 

apps/landing/src/i18n/client/use-translation.ts

@@ -0,0 +1,6 @@
+import type { Namespace } from "i18next";
+import { useTranslation as useTranslationOrg } from "react-i18next";
+
+export function useTranslation(ns?: Namespace) {
+  return useTranslationOrg(ns);
+}

apps/landing/src/utils/page-translations.ts

@@ -1,16 +0,0 @@
-import type { GetStaticProps } from "next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-
-export const getStaticTranslations =
-  (namespacesRequired: string[] = []): GetStaticProps =>
-  async (ctx) => {
-    const locale = ctx.locale ?? "en";
-    return {
-      props: {
-        ...(await serverSideTranslations(locale, [
-          "common",
-          ...namespacesRequired,
-        ])),
-      },
-    };
-  };

apps/web/package.json

@@ -58,9 +58,9 @@
     "dayjs": "^1.11.10",
     "i18next": "^24.2.2",
     "i18next-icu": "^2.3.0",
-    "i18next-resources-to-backend": "^1.1.4",
+    "i18next-resources-to-backend": "^1.2.1",
     "ics": "^3.1.0",
-    "intl-messageformat": "^10.3.4",
+    "intl-messageformat": "^10.7.15",
     "iron-session": "^6.3.1",
     "jose": "^5.9.6",
     "js-cookie": "^3.0.1",
@@ -71,7 +71,6 @@
     "micro": "^10.0.1",
     "nanoid": "^5.0.9",
     "next-auth": "^5.0.0-beta.25",
-    "next-i18next": "^13.0.3",
     "php-serialize": "^4.1.1",
     "postcss": "^8.4.31",
     "react-big-calendar": "^1.8.1",

apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx

@@ -3,7 +3,6 @@ import { Button } from "@rallly/ui/button";
 import { DialogTrigger } from "@rallly/ui/dialog";
 import { LogOutIcon, TrashIcon } from "lucide-react";
 import Head from "next/head";
-import { useTranslation } from "next-i18next";
 
 import { DeleteAccountDialog } from "@/app/[locale]/(admin)/settings/profile/delete-account-dialog";
 import { ProfileSettings } from "@/app/[locale]/(admin)/settings/profile/profile-settings";
@@ -15,6 +14,7 @@ import {
 } from "@/components/settings/settings";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
+import { useTranslation } from "@/i18n/client";
 
 import { ProfileEmailAddress } from "./profile-email-address";
 

apps/web/src/app/[locale]/poll/[urlId]/edit-options/page.tsx

@@ -5,7 +5,6 @@ import { Form } from "@rallly/ui/form";
 import dayjs from "dayjs";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
 
 import type { PollOptionsData } from "@/components/forms";
@@ -14,6 +13,7 @@ import { useModalContext } from "@/components/modal/modal-provider";
 import { useUpdatePollMutation } from "@/components/poll/mutations";
 import { usePoll } from "@/components/poll-context";
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 import { encodeDateOption } from "@/utils/date-time-utils";
 
 const convertOptionToString = (

apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { Alert, AlertDescription, AlertTitle } from "@rallly/ui/alert";
 import { InfoIcon } from "lucide-react";
-import { Trans } from "next-i18next";
 
 import { LoginLink } from "@/components/login-link";
 import { RegisterLink } from "@/components/register-link";
+import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 import { usePoll } from "@/contexts/poll";
 

apps/web/src/components/discussion/discussion.tsx

@@ -27,7 +27,6 @@ import {
   TrashIcon,
 } from "lucide-react";
 import { signIn, useSession } from "next-auth/react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -37,6 +36,7 @@ import { useParticipants } from "@/components/participants-provider";
 import { Trans } from "@/components/trans";
 import { usePoll } from "@/contexts/poll";
 import { useRole } from "@/contexts/role";
+import { useTranslation } from "@/i18n/client";
 import { trpc } from "@/trpc/client";
 
 import { requiredString } from "../../utils/form-validation";

apps/web/src/components/error-page.tsx

@@ -1,9 +1,10 @@
 import { Button } from "@rallly/ui/button";
 import { FrownIcon } from "lucide-react";
 import Link from "next/link";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { useTranslation } from "@/i18n/client";
+
 export interface ComponentProps {
   icon?: React.ComponentType<{ className?: string }>;
   title: string;

apps/web/src/components/feedback.tsx

@@ -14,7 +14,8 @@ import {
   SmileIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { Trans } from "next-i18next";
+
+import { Trans } from "@/components/trans";
 
 const FeedbackButton = () => {
   return (

apps/web/src/components/forms/poll-details-form.tsx

@@ -1,10 +1,10 @@
 import { FormField, FormItem, FormLabel, FormMessage } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
 import { Textarea } from "@rallly/ui/textarea";
-import { useTranslation } from "next-i18next";
 import { useFormContext } from "react-hook-form";
 
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 import { useFormValidation } from "@/utils/form-validation";
 
 import type { NewEventData } from "./types";

apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx

@@ -1,8 +1,9 @@
 import { Button } from "@rallly/ui/button";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { useTranslation } from "@/i18n/client";
+
 export interface DateNavigationToolbarProps {
   year: number;
   label: string;

apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -19,12 +19,12 @@ import {
   SparklesIcon,
   XIcon,
 } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
 import type { NewEventData } from "@/components/forms";
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 
 import {
   expectTimeOption,

apps/web/src/components/forms/poll-options-form/poll-options-form.tsx

@@ -16,11 +16,12 @@ import { Switch } from "@rallly/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@rallly/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
 import { CalendarIcon, GlobeIcon, InfoIcon, TableIcon } from "lucide-react";
-import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
 
 import { TimeZoneCommand } from "@/components/time-zone-picker/time-zone-select";
+import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 
 import { getBrowserTimeZone } from "../../../utils/date-time-utils";
 import type { NewEventData } from "../types";

apps/web/src/components/new-participant-modal.tsx

@@ -7,11 +7,11 @@ import { FormMessage } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
 import * as Sentry from "@sentry/nextjs";
 import { TRPCClientError } from "@trpc/client";
-import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
 import z from "zod";
 
 import { usePoll } from "@/contexts/poll";
+import { useTranslation } from "@/i18n/client";
 
 import { useAddParticipantMutation } from "./poll/mutations";
 import VoteIcon from "./poll/vote-icon";

apps/web/src/components/participant-dropdown.tsx

@@ -29,7 +29,6 @@ import {
 } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
 import { PencilIcon, TagIcon, TrashIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import React from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -39,6 +38,7 @@ import { z } from "zod";
 import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { useDeleteParticipantMutation } from "@/components/poll/mutations";
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 import { trpc } from "@/trpc/client";
 import { useFormValidation } from "@/utils/form-validation";
 

apps/web/src/components/poll-context.tsx

@@ -2,9 +2,9 @@ import type { Participant, VoteType } from "@rallly/database";
 import dayjs from "dayjs";
 import { keyBy } from "lodash";
 import { TrashIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import React from "react";
 
+import { useTranslation } from "@/i18n/client";
 import type { GetPollApiResponse, Vote } from "@/trpc/client/types";
 import type {
   ParsedDateOption,

apps/web/src/components/poll/desktop-poll.tsx

@@ -12,7 +12,6 @@ import {
   ShrinkIcon,
   Users2Icon,
 } from "lucide-react";
-import { Trans } from "next-i18next";
 import * as React from "react";
 import { RemoveScroll } from "react-remove-scroll";
 import { useMeasure, useScroll } from "react-use";
@@ -25,6 +24,7 @@ import {
   EmptyStateTitle,
 } from "@/components/empty-state";
 import { useVotingForm } from "@/components/poll/voting-form";
+import { Trans } from "@/components/trans";
 import { usePermissions } from "@/contexts/permissions";
 import { usePoll } from "@/contexts/poll";
 import { useTranslation } from "@/i18n/client";

apps/web/src/components/poll/desktop-poll/participant-row-form.tsx

@@ -8,7 +8,6 @@ import {
   TooltipTrigger,
 } from "@rallly/ui/tooltip";
 import { UndoIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { Controller } from "react-hook-form";
 
@@ -17,6 +16,7 @@ import { Participant, ParticipantName } from "@/components/participant";
 import { useVotingForm } from "@/components/poll/voting-form";
 import { YouAvatar } from "@/components/poll/you-avatar";
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 
 import { usePoll } from "../../poll-context";
 import { toggleVote, VoteSelector } from "../vote-selector";

apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx

@@ -19,7 +19,6 @@ import {
 } from "@rallly/ui/form";
 import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
 import dayjs from "dayjs";
-import { Trans } from "next-i18next";
 import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -27,6 +26,7 @@ import { z } from "zod";
 import { DateIconInner } from "@/components/date-icon";
 import { useParticipants } from "@/components/participants-provider";
 import { ConnectedScoreSummary } from "@/components/poll/score-summary";
+import { Trans } from "@/components/trans";
 import { VoteSummaryProgressBar } from "@/components/vote-summary-progress-bar";
 import { usePoll } from "@/contexts/poll";
 import { trpc } from "@/trpc/client";

apps/web/src/components/poll/manage-poll/use-csv-exporter.ts

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
-import { useTranslation } from "next-i18next";
 
 import { useOptions, usePoll } from "@/components/poll-context";
+import { useTranslation } from "@/i18n/client";
 
 import { useParticipants } from "../../participants-provider";
 

apps/web/src/components/poll/mobile-poll.tsx

@@ -11,7 +11,6 @@ import {
 } from "@rallly/ui/select";
 import { AnimatePresence, m } from "framer-motion";
 import { MoreHorizontalIcon, PlusIcon, UsersIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 import smoothscroll from "smoothscroll-polyfill";
 
@@ -24,6 +23,7 @@ import { YouAvatar } from "@/components/poll/you-avatar";
 import { useOptions, usePoll } from "@/components/poll-context";
 import { Trans } from "@/components/trans";
 import { usePermissions } from "@/contexts/permissions";
+import { useTranslation } from "@/i18n/client";
 
 import { useVisibleParticipants } from "../participants-provider";
 import { useUser } from "../user-provider";

apps/web/src/components/poll/notifications-toggle.tsx

@@ -4,12 +4,12 @@ import { Icon } from "@rallly/ui/icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
 import { BellOffIcon, BellRingIcon } from "lucide-react";
 import { signIn } from "next-auth/react";
-import { useTranslation } from "next-i18next";
 import * as React from "react";
 
 import { Skeleton } from "@/components/skeleton";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
+import { useTranslation } from "@/i18n/client";
 import { trpc } from "@/trpc/client";
 
 import { usePoll } from "../poll-context";

apps/web/src/components/pro-badge.tsx

@@ -1,5 +1,6 @@
 import { Badge } from "@rallly/ui/badge";
-import { Trans } from "next-i18next";
+
+import { Trans } from "@/components/trans";
 
 export const ProBadge = ({ className }: { className?: string }) => {
   return (

apps/web/src/components/settings/language-preference.tsx

@@ -3,13 +3,13 @@ import { Form, FormField, FormItem, FormLabel } from "@rallly/ui/form";
 import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { LanguageSelect } from "@/components/poll/language-selector";
 import { Trans } from "@/components/trans";
 import { usePreferences } from "@/contexts/preferences";
+import { useTranslation } from "@/i18n/client";
 
 const formSchema = z.object({
   language: z.string(),

apps/web/src/components/steps/steps.tsx

@@ -1,7 +1,8 @@
 import { cn } from "@rallly/ui";
-import { useTranslation } from "next-i18next";
 import React from "react";
 
+import { useTranslation } from "@/i18n/client";
+
 export interface StepsProps {
   current: number;
   total: number;

apps/web/src/components/time-zone-picker/time-zone-select.tsx

@@ -16,10 +16,10 @@ import { useDialog } from "@rallly/ui/dialog";
 import { Icon } from "@rallly/ui/icon";
 import dayjs from "dayjs";
 import { CheckIcon, GlobeIcon } from "lucide-react";
-import { useTranslation } from "next-i18next";
 import React from "react";
 
 import { Trans } from "@/components/trans";
+import { useTranslation } from "@/i18n/client";
 import { groupedTimeZones } from "@/utils/grouped-time-zone";
 
 interface TimeZoneCommandProps {

apps/web/src/components/upgrade-button.tsx

@@ -1,9 +1,10 @@
 import { usePostHog } from "@rallly/posthog/client";
 import { Button } from "@rallly/ui/button";
 import Link from "next/link";
-import { Trans } from "next-i18next";
 import React from "react";
 
+import { Trans } from "@/components/trans";
+
 export const UpgradeButton = ({
   children,
   annual,

apps/web/src/utils/form-validation.ts

@@ -1,4 +1,4 @@
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@/i18n/client";
 
 /**
  * @deprecated Use form validation hook instead