Fix example for next-i18next #1917

.gitignore

@@ -1,9 +1,14 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+**/node_modules
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
 
 # testing
 /coverage
@@ -33,3 +38,12 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# IDE
+.idea/*
+!.idea/modules.xml
+!.idea/perso.iml
+.project
+.classpath
+*.launch
+*.sublime-workspace

.yarnrc.yml

@@ -0,0 +1,3 @@
+yarnPath: .yarn/releases/yarn-4.0.0-rc.25.cjs
+nodeLinker: "node-modules"
+nmMode: hardlinks-local

components/layout.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from "react";
+import { useTranslation } from "next-i18next";
+
+export const Layout: FC<{ children: ReactNode }> = ({ children }) => {
+    const { t } = useTranslation();
+
+    return (
+        <div>
+            <div>{t("hello-world")}</div>
+            {children}
+        </div>
+    );
+};

lib/i18n/getServerSideTranslations.ts

@@ -0,0 +1,17 @@
+/**
+ * Retrieve translations on server-side, wraps next-i18next.serverSideTranslations
+ * and import next-i18next.config explicitly (prevent dual packaging hazards)
+ */
+import type { SSRConfig, UserConfig } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import nextI18nextConfig from '../../next-i18next.config';
+
+export const getServerSideTranslations = async (
+  locale: string,
+  namespacesRequired?: string[] | Readonly<string[]> | undefined,
+  configOverride?: UserConfig | null
+): Promise<SSRConfig> => {
+  const override = configOverride ?? nextI18nextConfig;
+  // Slice needed here cause serverSlideTranslations does not accept Readonly type
+  return serverSideTranslations(locale, namespacesRequired?.slice(), override);
+};

lib/i18n/index.ts

@@ -0,0 +1 @@
+export { getServerSideTranslations } from './getServerSideTranslations';

next-i18next.config.js

@@ -1,6 +1,13 @@
 module.exports = {
   i18n: {
-    defaultLocale: "en",
-    locales: ["en", "id"],
+    defaultLocale: 'en',
+    locales: ['en', 'id'],
   },
+  react: {
+    useSuspense: false,
+  },
+  localePath: typeof window === "undefined" ?
+      require('path').resolve('./public/locales'):
+      '/public/locales'
 };
+

next.config.mjs

@@ -0,0 +1,13 @@
+import nextI18nConfig from './next-i18next.config.js';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  i18n: nextI18nConfig.i18n,
+  experimental: {
+    esmExternals: true, // optional
+  }
+};
+
+export default nextConfig;

package.json

@@ -3,23 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "clean": "rimraf '.next'",
+    "nuke": "rimraf '.next' '**/node_modules'",
+    "nuke:node_modules": "rimraf '**/node_modules'",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "12.2.3",
-    "next-i18next": "^11.3.0",
+    "next": "12.3.1",
+    "next-i18next": "12.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "18.0.6",
-    "@types/react": "18.0.15",
+    "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
-    "eslint": "8.20.0",
-    "eslint-config-next": "12.2.3",
-    "typescript": "4.7.4"
-  }
+    "eslint": "8.25.0",
+    "eslint-config-next": "12.3.1",
+    "pnpm-deduplicate": "0.3.1",
+    "rimraf": "3.0.2",
+    "typescript": "4.8.4"
+  },
+  "packageManager": "[email protected]"
 }

pages/_app.tsx

@@ -1,7 +1,8 @@
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
-import { appWithTranslation, useTranslation } from "next-i18next";
-import React from "react";
+import { appWithTranslation } from "next-i18next";
+import { Layout } from "../components/layout";
+import nextI18nConfig from '../next-i18next.config';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -11,15 +12,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <div>{t("hello-world")}</div>
-      {children}
-    </div>
-  );
-};
-
-export default appWithTranslation(MyApp);
+export default appWithTranslation(MyApp, nextI18nConfig);

pages/index.tsx

@@ -2,8 +2,7 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
-
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import {getServerSideTranslations} from "../lib/i18n";
 
 const Home: NextPage = () => {
   return (
@@ -76,7 +75,7 @@ export default Home;
 export async function getStaticProps({ locale }: any) {
   return {
     props: {
-      ...(await serverSideTranslations(locale)),
+      ...(await getServerSideTranslations(locale)),
       // Will be passed to the page component as props
     },
   };