feat: attempt for error replication

tolgee/tolgee-js#3263

package.json

@@ -14,11 +14,12 @@
   "dependencies": {
     "@tolgee/format-icu": "5.13.1",
     "@tolgee/react": "5.13.1",
-    "next": "13.4.7",
+    "next": "^13.5.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@types/node": "20.8.6",
     "@types/react": "18.0.28",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",

src/components/tolgee.ts

@@ -0,0 +1,15 @@
+import { DevTools, Tolgee } from '@tolgee/react'
+import { FormatIcu } from '@tolgee/format-icu'
+import en from '../../public/i18n/en.json'
+
+const apiKey = process.env.NEXT_PUBLIC_TOLGEE_API_KEY;
+const apiUrl = process.env.NEXT_PUBLIC_TOLGEE_API_URL;
+
+export const tolgee = Tolgee().use(DevTools()).use(FormatIcu()).init({
+  defaultLanguage: 'en',
+  apiKey: apiKey,
+  apiUrl: apiUrl,
+  staticData: {
+    en
+  }
+})

src/pages/_app.tsx

@@ -0,0 +1,18 @@
+import { TolgeeProvider, useTolgeeSSR } from "@tolgee/react";
+import { useRouter } from "next/router";
+import { AppProps } from "next/app";
+
+import { tolgee } from "../components/tolgee";
+
+const App = ({ Component, pageProps }: AppProps) => {
+  const router = useRouter();
+  const ssrTolgee = useTolgeeSSR(tolgee, router.locale);
+
+  return (
+    <TolgeeProvider tolgee={ssrTolgee}>
+      <Component {...pageProps} />
+    </TolgeeProvider>
+  );
+};
+
+export default (App);

src/pages/index.tsx

@@ -1,21 +1,8 @@
-import type { GetStaticProps, NextPage } from 'next';
-import { getServerLocales, TolgeeNextProvider } from '../tolgeeNext';
-import { Todos } from '../views/Todos';
+import type { NextPage } from "next";
+import { Todos } from "../views/Todos";
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  return {
-    props: {
-      locales: await getServerLocales(context.locale),
-    },
-  };
-};
-
-const Home: NextPage<{ locales: any }> = ({ locales }) => {
-  return (
-    <TolgeeNextProvider locales={locales}>
-      <Todos />
-    </TolgeeNextProvider>
-  );
+const Home: NextPage = () => {
+  return <Todos />;
 };
 
 export default Home;

src/pages/translation-methods.tsx

@@ -1,21 +1,8 @@
-import type { GetStaticProps, NextPage } from 'next';
-import { getServerLocales, TolgeeNextProvider } from '../tolgeeNext';
-import { TranslationMethods } from '../views/TranslationMethods';
+import type { NextPage } from "next";
+import { TranslationMethods } from "../views/TranslationMethods";
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  return {
-    props: {
-      locales: await getServerLocales(context.locale, ['', 'namespaced']),
-    },
-  };
-};
-
-const Home: NextPage<{ locales: any }> = ({ locales }) => {
-  return (
-    <TolgeeNextProvider locales={locales}>
-      <TranslationMethods />
-    </TolgeeNextProvider>
-  );
+const Home: NextPage = () => {
+  return <TranslationMethods />;
 };
 
 export default Home;