install localisation library

src/components/Card.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
 import breakpoints from "@theme/breakpoints";
+import { useTranslation } from "../i18n";
 
 interface WrappedCardProps {
   title: string;
@@ -71,6 +72,7 @@ const StyledCard = styled.article`
 const WrappedCard: React.FC<WrappedCardProps> = ({
   title, text, link, image, start_time, buttonOnClick, ...props
 }) => {
+  const { t } = useTranslation();
   const options: Intl.DateTimeFormatOptions = {
     day: "numeric",
     month: "numeric",
@@ -83,7 +85,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
   const button = (
     <Link to={link}>
       <button type="button" onClick={buttonOnClick}>
-        Lue lisää&nbsp;›
+        {t("Lue lisää")}&nbsp;›
       </button>
     </Link>
   );

src/components/ChangeLanguageButton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import i18nNext, { useTranslation } from "../i18n";
+
+const ChangeLanguageButton: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { i18n } = i18nNext;
+
+  return (
+    <button type="button" onClick={() => i18n.changeLanguage(i18n.language === "fi" ? "en" : "fi")}>{t("lngButton")}</button>
+  );
+};
+
+export default ChangeLanguageButton;

src/i18n.ts

@@ -0,0 +1,16 @@
+import NextI18Next from "next-i18next";
+
+import Config from "next/config";
+import path from "path";
+
+const NextI18NextInstance = new NextI18Next({
+  defaultLanguage: "fi",
+  defaultNS: "common",
+  localeSubpaths: Config().publicRuntimeConfig.localeSubpaths,
+  localePath: path.resolve("./public/locales"),
+  otherLanguages: ["en"],
+});
+
+export const { appWithTranslation, useTranslation } = NextI18NextInstance;
+
+export default NextI18NextInstance;

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
 import { ToastContainer } from "react-toastify";
 import { colors } from "@theme/colors";
+import { appWithTranslation } from "../i18n";
 
 import "react-mde/lib/styles/css/react-mde-all.css";
 import "react-toastify/dist/ReactToastify.css";
@@ -158,4 +159,4 @@ const Web20App = ({ Component, pageProps }: AppProps) => (
 //   return { ...appProps }
 // }
 
-export default Web20App;
+export default appWithTranslation(Web20App);

src/views/EventPage/EventPageView.tsx

@@ -9,6 +9,7 @@ import noop from "@utils/noop";
 
 import MarkdownStyles from "@views/common/MarkdownStyles";
 import LoadingView from "@views/common/LoadingView";
+// import ChangeLanguageButton from "@components/ChangeLanguageButton";
 
 interface EventPageViewProps {
   event?: Event;