Get i18n working (#36)

* Attempt to get i18n working

* Add patch

* Remove app-level package-lock

* Fix Next patches

* Works, hydration error on client though

* Remove debugger statement

* Fix home link

* Build fix

* Kinda works for static pages only

* Make static page translations work

* Cleanups

Author: huntharo

.vscode/settings.json

@@ -2,7 +2,7 @@
   "files.exclude": {
     "cdk.out": true
   },
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "files.associations": {

package-lock.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { parseISO, format } from 'date-fns';
 
-export default function Date({ dateString }) {
+export default function Date({ dateString }: { dateString: string }) {
   const date = parseISO(dateString);
   return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
 }

packages/app/components/date.tsx

@@ -1,22 +1,23 @@
 import Head from 'next/head';
 import Image from 'next/image';
-import styles from './layout.module.css';
-import utilStyles from '../styles/utils.module.css';
 import Link from 'next/link';
 import getConfig from 'next/config';
 import React from 'react';
+import { useTranslation } from 'next-i18next';
+import styles from './layout.module.css';
+import utilStyles from '../styles/utils.module.css';
 
-const name = 'PwrDrvr';
 export const siteTitle = 'PwrDrvr - Next.js Demo';
 
-export default function Layout({
-  children,
-  home = undefined,
-}: {
+const name = 'PwrDrvr';
+export default function Layout(context: {
   children: React.ReactNode;
   home?: boolean;
+  locale: string;
 }): JSX.Element {
+  const { children, home = undefined } = context;
   const base = getConfig().publicRuntimeConfig.staticFolder;
+  const { t } = useTranslation('common');
 
   return (
     <div className={styles.container}>
@@ -54,13 +55,13 @@ export default function Layout({
                 src={`${base}/images/profile.jpg`}
                 unoptimized
                 className={utilStyles.borderCircle}
-                height={108}
-                width={108}
+                height={144}
+                width={144}
                 alt={name}
               />
             </Link>
             <h2 className={utilStyles.headingLg}>
-              <Link href="/nextjs-demo" className={utilStyles.colorInherit}>
+              <Link href={`/${context.locale}/nextjs-demo`} className={utilStyles.colorInherit}>
                 {name}
               </Link>
             </h2>
@@ -70,7 +71,7 @@ export default function Layout({
       <main>{children}</main>
       {!home && (
         <div className={styles.backToHome}>
-          <Link href="/nextjs-demo">← Back to home</Link>
+          <Link href={`/nextjs-demo`}>{`← ${t('back-to-home')}`}</Link>
         </div>
       )}
     </div>

packages/app/components/layout.tsx

@@ -0,0 +1,21 @@
+import type { Namespace } from 'i18next';
+import type { SSRConfig, UserConfig } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import nextI18nextConfig from '../next-i18next.config';
+
+//
+// Trick to fix server-side bundling 'can't find module packages/app/next-i18next.config.js'
+// From: https://github.com/i18next/next-i18next/blob/master/TROUBLESHOOT.md#how-to-explicitly-pass-the-config
+//
+
+type ArrayElementOrSelf<T> = T extends Array<infer U> ? U[] : T[];
+
+export const getServerTranslations = async (
+  locale: string,
+  namespacesRequired?: ArrayElementOrSelf<Namespace> | undefined,
+  configOverride?: UserConfig,
+  extraLocales?: string[] | false,
+): Promise<SSRConfig> => {
+  const config = configOverride ?? nextI18nextConfig;
+  return serverSideTranslations(locale || 'en', namespacesRequired, config, extraLocales);
+};

packages/app/lib/getServerTranslations.ts

@@ -0,0 +1,23 @@
+const path = require('path');
+
+const backend = require('i18next-http-backend/cjs');
+
+/**
+ * @type {import('next-i18next/dist/types/types').UserConfig}
+ */
+const config = {
+  debug: process.env.NODE_ENV === 'development',
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'sv'],
+  },
+  ns: ['common'],
+  /** To avoid issues when deploying to some paas (vercel...) */
+  localePath:
+    typeof window === 'undefined' ? require('path').resolve('./public/locales') : '/locales',
+
+  reloadOnPrerender: process.env.NODE_ENV === 'development',
+  react: { useSuspense: false }, //this line
+};
+
+module.exports = config;

packages/app/next-i18next.config.js

@@ -1,9 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-// const path = require('path');
-// next-compose-plugins
-// const withPlugins = require('next-compose-plugins');
-// next-images
-// const withImages = require('next-images')
+const i18NextConfig = require('./next-i18next.config');
+const { i18n } = i18NextConfig;
+
 const isProd = process.env.NODE_ENV === 'production';
 
 const BASE_PREFIX_APP = '/nextjs-demo';
@@ -16,12 +14,14 @@ const BASE_PREFIX_APP_WITH_VERSION = `${BASE_PREFIX_APP}${BASE_VERSION_ONLY}`;
  * @type {import('next').NextConfig}
  */
 module.exports = {
-  output: 'standalone',
+  ...(isProd ? { output: 'standalone' } : {}),
   outputFileTracing: isProd,
   experimental: {
     bundleServerPackages: isProd,
   },
 
+  i18n,
+
   // We want the static assets, api calls, and _next/data calls
   // to have /nextjs-demo/0.0.0/ as the prefix so they route cleanly
   // to an isolated folder on the S3 bucket and to a specific
@@ -61,41 +61,49 @@ module.exports = {
   // in the path, which is perfect because that's where the assets
   // will be on the S3 bucket.
   async rewrites() {
-    return [
-      {
-        /** Static Assets and getServerSideProps (_next/data/) */
-        source: `${BASE_PREFIX_APP_WITH_VERSION}/_next/:path*`,
-        destination: `/_next/:path*`,
-      },
-      {
-        /** Image optimizer (not tested yet) */
-        source: `${BASE_VERSION_ONLY}/_next/image/:query*`,
-        destination: `/_next/image/:query*`,
-      },
-      {
-        // Images
-        // Only used for local development
-        // On deployed environments, the images are served from S3
-        // and image requests will never reach this rewrite
-        source: `${BASE_PREFIX_APP_WITH_VERSION}/images/:query*`,
-        destination: `/images/:query*`,
-      },
-      {
-        // Favicon
-        // Only used for local development
-        source: `${BASE_PREFIX_APP_WITH_VERSION}/favicon.ico`,
-        destination: `/favicon.ico`,
-      },
-      /** Api Calls */
-      {
-        source: `${BASE_VERSION_ONLY}/api/:path*`,
-        destination: `/api/:path*`,
-      },
-    ];
+    return {
+      beforeFiles: [
+        {
+          /** Static Assets and getServerSideProps (_next/data/) */
+          source: `${BASE_PREFIX_APP_WITH_VERSION}/_next/static/:path*`,
+          destination: `/_next/static/:path*`,
+        },
+        {
+          // Favicon
+          // Only used for local development
+          source: `${BASE_PREFIX_APP_WITH_VERSION}/favicon.ico`,
+          destination: `/favicon.ico`,
+        },
+        {
+          // Images
+          // Only used for local development
+          // On deployed environments, the images are served from S3
+          // and image requests will never reach this rewrite
+          source: `${BASE_PREFIX_APP_WITH_VERSION}/images/:query*`,
+          destination: `/images/:query*`,
+        },
+      ],
+      afterFiles: [
+        {
+          /** Image optimizer (not tested yet) */
+          source: `${BASE_VERSION_ONLY}/_next/image/:query*`,
+          destination: `/_next/image/:query*`,
+        },
+        /** Api Calls */
+        {
+          source: `${BASE_VERSION_ONLY}/api/:path*`,
+          destination: `/api/:path*`,
+        },
+      ],
+    };
   },
 
   publicRuntimeConfig: {
     // Will be available on both server and client
     staticFolder: isProd ? BASE_PREFIX_APP_WITH_VERSION : BASE_PREFIX_APP_WITH_VERSION,
   },
+
+  typescript: {
+    tsconfigPath: './tsconfig.json',
+  },
 };