feat: add next-international translations (#2)

* feat: add next-international translations
* chore: fix formatting
* chore: address pull request feedback

apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+import { defaultLocale } from "@alparr/translation";
+import { I18nProviderClient } from "@alparr/translation/client";
+
+export const NextInternationalProvider = ({
+  children,
+  locale,
+}: PropsWithChildren<{ locale: string }>) => {
+  return (
+    <I18nProviderClient locale={locale} fallback={defaultLocale}>
+      {children}
+    </I18nProviderClient>
+  );
+};

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
+import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { env } from "~/env.mjs";
+import { api } from "~/utils/api";
+
+const getBaseUrl = () => {
+  if (typeof window !== "undefined") return ""; // browser should use relative url
+  if (env.VERCEL_URL) return env.VERCEL_URL; // SSR should use vercel url
+
+  return `http://localhost:${env.PORT}`; // dev SSR should use localhost
+};
+
+export function TRPCReactProvider(props: {
+  children: React.ReactNode;
+  headers?: Headers;
+}) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 1000,
+          },
+        },
+      }),
+  );
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      transformer: superjson,
+      links: [
+        loggerLink({
+          enabled: (opts) =>
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        unstable_httpBatchStreamLink({
+          url: `${getBaseUrl()}/api/trpc`,
+          headers() {
+            const headers = new Map(props.headers);
+            headers.set("x-trpc-source", "nextjs-react");
+            return Object.fromEntries(headers);
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryStreamedHydration transformer={superjson}>
+          {props.children}
+        </ReactQueryStreamedHydration>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </api.Provider>
+  );
+}