Update next next-i18next, delete sass plugin

next.config.js

@@ -1,9 +1,11 @@
-const withSass = require('@zeit/next-sass');
+const { nextI18NextRewrites } = require('next-i18next/rewrites');
 
-module.exports = withSass({
-  cssModules: true,
-  cssLoaderOptions: {
-    importLoaders: 1,
-    localIdentName: '[local]___[hash:base64:5]',
-  },
-});
+const localeSubpaths = {
+  fi: 'fi',
+  en: 'en',
+  sv: 'sv',
+};
+
+module.exports = {
+  rewrites: async () => nextI18NextRewrites(localeSubpaths),
+};

package.json

@@ -49,14 +49,14 @@
     "i18next-intervalplural-postprocessor": "^2.0.1",
     "ics": "^2.22.1",
     "jsdom": "^16.2.2",
-    "next": "9.4.4",
-    "next-i18next": "^4.4.2",
+    "next": "9.5.4",
+    "next-i18next": "^6.0.3",
     "next-with-apollo": "^5.0.1",
     "node-sass": "^4.14.1",
     "query-string": "^6.13.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-i18next": "^11.5.0",
+    "react-i18next": "^11.7.3",
     "react-redux": "^7.2.0",
     "react-table": "^7.2.2",
     "react-toastify": "^6.0.8",

src/common/components/menuDropdown/MenuDropdown.tsx

@@ -6,6 +6,9 @@ import useKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation'
 import { Language } from '../../../types';
 import styles from './menuDropdown.module.scss';
 
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 export type MenuItem = {
   icon?: React.ReactElement;
   language?: Language;
@@ -170,7 +173,7 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({
     }
   };
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setupKeyboardNav();
     document.addEventListener('click', onDocumentClick);
     document.addEventListener('focusin', onDocumentFocusin);

src/common/components/menuDropdown/menuDropdown.module.scss

@@ -23,7 +23,7 @@
   --size-button-angle-icon: var(--spacing-layout-xs);
 
   --spacing-button: var(--spacing-2-xs);
-  --spacing-menu-item: var(--spacing-s);
+  --spacing-menu-item: var(--spacing-xs);
 }
 
 .menuDropdown {

src/domain/event/eventCard/EventCard.tsx

@@ -16,10 +16,9 @@ import styles from './eventCard.module.scss';
 interface Props {
   event: EventFieldsFragment;
   link: string;
-  onClick?: (id: string) => void;
 }
 
-const EventCard: React.FC<Props> = ({ event, link, onClick }) => {
+const EventCard: React.FC<Props> = ({ event, link }) => {
   const { t } = useTranslation();
   const locale = useLocale();
 

src/i18n.ts

@@ -1,15 +1,20 @@
+import path from 'path';
+
 import intervalPlural from 'i18next-intervalplural-postprocessor';
 import NextI18Next from 'next-i18next';
 
+const localeSubpaths = {
+  fi: 'fi',
+  en: 'en',
+  sv: 'sv',
+};
+
 const NextI18NextInstance = new NextI18Next({
   defaultLanguage: 'fi',
   ignoreRoutes: ['/healthz', '/readiness', '/_next', '/static', '/favicon.ico'],
-  localeSubpaths: {
-    en: 'en',
-    fi: 'fi',
-    sv: 'sv',
-  },
+  localeSubpaths,
   otherLanguages: ['en', 'sv'],
+  localePath: path.resolve('./public/static/locales'),
 });
 
 NextI18NextInstance.i18n.use(intervalPlural);

src/server.js

@@ -1,8 +1,5 @@
 import express from 'express';
 import next from 'next';
-import nextI18NextMiddleware from 'next-i18next/middleware';
-
-import nextI18next from './i18n.ts';
 
 const port = process.env.PORT || 3000;
 const app = next({ dev: process.env.NODE_ENV !== 'production' });
@@ -31,10 +28,6 @@ const checkIsServerReady = (response) => {
   await app.prepare();
   const server = express();
 
-  await nextI18next.initPromise;
-
-  server.use(nextI18NextMiddleware(nextI18next));
-
   server.get('/healthz', (req, res) => {
     checkIsServerReady(res);
   });