install localisation library

next.config.js

@@ -4,6 +4,9 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 
 module.exports = withBundleAnalyzer({
   target: "server",
+  publicRuntimeConfig: {
+    localeSubpaths: {},
+  },
   images: {
     domains: [
       "sahkoinsinoorikilta.fi",

package-lock.json

@@ -15,6 +15,7 @@
         "js-cookie": "2.2.1",
         "lodash": "4.17.21",
         "next": "10.1.2",
+        "next-i18next": "^7.0.1",
         "normalize.css": "8.0.1",
         "react": "17.0.1",
         "react-beautiful-dnd": "13.1.0",
@@ -1887,6 +1888,23 @@
         "postcss-syntax": ">=0.36.2"
       }
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.34",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
+      "integrity": "sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/error-stack-parser": {
       "version": "1.3.18",
       "resolved": "https://registry.npmjs.org/@types/error-stack-parser/-/error-stack-parser-1.3.18.tgz",
@@ -1899,6 +1917,27 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "node_modules/@types/express": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.11.tgz",
+      "integrity": "sha512-no+R6rW60JEc59977wIxreQVsIEOAYwgCqldrA/vkpCnbD7MqTefO97lmoBe4WE0F156bC4uLSP1XHDOySnChg==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz",
+      "integrity": "sha512-DJOSHzX7pCiSElWaGR8kCprwibCB/3yW6vcT8VG3P0SJjnv19gnWG/AZMfM60Xj/YJIp/YCaDHyvzsFVeniARA==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "node_modules/@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -1950,6 +1989,11 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
@@ -1984,6 +2028,16 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
+    },
     "node_modules/@types/react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
@@ -2041,6 +2095,15 @@
         "redux": "^4.0.0"
       }
     },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.9",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz",
+      "integrity": "sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/shortid": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
@@ -6343,6 +6406,14 @@
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
+    "node_modules/html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "dependencies": {
+        "void-elements": "^2.0.1"
+      }
+    },
     "node_modules/html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -6443,6 +6514,40 @@
         "node": ">= 10"
       }
     },
+    "node_modules/i18next": {
+      "version": "19.9.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.9.2.tgz",
+      "integrity": "sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-5.0.1.tgz",
+      "integrity": "sha512-7K4A6DJ2rNz3Yd835Y493UgkzUxgpGsCeIMKLGkt6Ps0cbgSaJ+LdATFNFA+ujp2brmsUM9BeDThXKhabXUbUw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/i18next-fs-backend": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.1.1.tgz",
+      "integrity": "sha512-RFkfy10hNxJqc7MVAp5iAZq0Tum6msBCNebEe3OelOBvrROvzHUPaR8Qe10RQrOGokTm0W4vJGEJzruFkEt+hQ=="
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.2.1.tgz",
+      "integrity": "sha512-9L2sa+wybqi57/+VsrJPo5DCI7WLoudaK12xz0okYSmsi3Izyj7sCgrYL52WHy/O3BFY9HGORBwSwlD1WYuH6Q==",
+      "dependencies": {
+        "node-fetch": "2.6.1"
+      }
+    },
+    "node_modules/i18next-http-middleware": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/i18next-http-middleware/-/i18next-http-middleware-3.1.0.tgz",
+      "integrity": "sha512-65rP8bi5b7znBzfgIUy0KE00SWg1X6mL5XEkassgTrjAeLSfSb4vQ2bs9cN3qwHCynKIpmHjmNDu5c8NylTVmw=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
@@ -8162,6 +8267,46 @@
         }
       }
     },
+    "node_modules/next-i18next": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-7.0.1.tgz",
+      "integrity": "sha512-x97lSfB11q/5Flf1Ocz02WoXeIRuVi7oJQ+8p9kNSfoIJExz1nTLPpJmWr2SF8wDxaljzL/kjlETUOyptGhSjQ==",
+      "dependencies": {
+        "@types/express": "^4.16.1",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.2.0",
+        "i18next": "^19.6.3",
+        "i18next-browser-languagedetector": "^5.0.0",
+        "i18next-fs-backend": "^1.0.7",
+        "i18next-http-backend": "^1.0.17",
+        "i18next-http-middleware": "^3.0.2",
+        "path-match": "^1.2.4",
+        "prop-types": "^15.6.2",
+        "react-i18next": "^11.7.3",
+        "url": "^0.11.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/isaachinman"
+      },
+      "peerDependencies": {
+        "next": ">= 9.5.0",
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/next-i18next/node_modules/core-js": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.0.tgz",
+      "integrity": "sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/next-sitemap": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-1.6.18.tgz",
@@ -9173,12 +9318,51 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-match": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/path-match/-/path-match-1.2.4.tgz",
+      "integrity": "sha1-pidH88fgwlFHYml/JEQ1hbCRAOo=",
+      "dependencies": {
+        "http-errors": "~1.4.0",
+        "path-to-regexp": "^1.0.0"
+      }
+    },
+    "node_modules/path-match/node_modules/http-errors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
+      "integrity": "sha1-bAJC3qaz33r9oVPHEImzHG6Cqr8=",
+      "dependencies": {
+        "inherits": "2.0.1",
+        "statuses": ">= 1.2.1 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/path-match/node_modules/inherits": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+      "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+    },
     "node_modules/path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
       "dev": true
     },
+    "node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/path-to-regexp/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -10268,6 +10452,19 @@
         "react": "17.0.1"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "11.8.12",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.12.tgz",
+      "integrity": "sha512-M2PSVP9MzT/7yofXfCOF5gAVotinrM4BXWiguk8uFSznJsfFzTjrp3K9CBWcXitpoCBVZGZJ2AnbaWGSNkJqfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.6",
+        "html-parse-stringify2": "^2.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14074,6 +14271,14 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "node_modules/void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
@@ -15944,6 +16149,23 @@
         "unist-util-find-all-after": "^3.0.2"
       }
     },
+    "@types/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.34",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
+      "integrity": "sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/error-stack-parser": {
       "version": "1.3.18",
       "resolved": "https://registry.npmjs.org/@types/error-stack-parser/-/error-stack-parser-1.3.18.tgz",
@@ -15956,6 +16178,27 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "@types/express": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.11.tgz",
+      "integrity": "sha512-no+R6rW60JEc59977wIxreQVsIEOAYwgCqldrA/vkpCnbD7MqTefO97lmoBe4WE0F156bC4uLSP1XHDOySnChg==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.19.tgz",
+      "integrity": "sha512-DJOSHzX7pCiSElWaGR8kCprwibCB/3yW6vcT8VG3P0SJjnv19gnWG/AZMfM60Xj/YJIp/YCaDHyvzsFVeniARA==",
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -16007,6 +16250,11 @@
         "@types/unist": "*"
       }
     },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
     "@types/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
@@ -16041,6 +16289,16 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
+    "@types/qs": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
+    },
     "@types/react": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
@@ -16098,6 +16356,15 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/serve-static": {
+      "version": "1.13.9",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz",
+      "integrity": "sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==",
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
     "@types/shortid": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
@@ -19446,6 +19713,14 @@
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "requires": {
+        "void-elements": "^2.0.1"
+      }
+    },
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -19515,6 +19790,40 @@
       "integrity": "sha512-fbNJ+Gz5wx2LIBtMweJNY1D7Uc8p1XERi5KNRMccwfQA+rXlxWNSdUxswo0gT8XqxywTIw7Ywm/F4v/O35RdMg==",
       "dev": true
     },
+    "i18next": {
+      "version": "19.9.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.9.2.tgz",
+      "integrity": "sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-5.0.1.tgz",
+      "integrity": "sha512-7K4A6DJ2rNz3Yd835Y493UgkzUxgpGsCeIMKLGkt6Ps0cbgSaJ+LdATFNFA+ujp2brmsUM9BeDThXKhabXUbUw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "i18next-fs-backend": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.1.1.tgz",
+      "integrity": "sha512-RFkfy10hNxJqc7MVAp5iAZq0Tum6msBCNebEe3OelOBvrROvzHUPaR8Qe10RQrOGokTm0W4vJGEJzruFkEt+hQ=="
+    },
+    "i18next-http-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.2.1.tgz",
+      "integrity": "sha512-9L2sa+wybqi57/+VsrJPo5DCI7WLoudaK12xz0okYSmsi3Izyj7sCgrYL52WHy/O3BFY9HGORBwSwlD1WYuH6Q==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      }
+    },
+    "i18next-http-middleware": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/i18next-http-middleware/-/i18next-http-middleware-3.1.0.tgz",
+      "integrity": "sha512-65rP8bi5b7znBzfgIUy0KE00SWg1X6mL5XEkassgTrjAeLSfSb4vQ2bs9cN3qwHCynKIpmHjmNDu5c8NylTVmw=="
+    },
     "iconv-lite": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
@@ -20831,6 +21140,32 @@
         }
       }
     },
+    "next-i18next": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-7.0.1.tgz",
+      "integrity": "sha512-x97lSfB11q/5Flf1Ocz02WoXeIRuVi7oJQ+8p9kNSfoIJExz1nTLPpJmWr2SF8wDxaljzL/kjlETUOyptGhSjQ==",
+      "requires": {
+        "@types/express": "^4.16.1",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.2.0",
+        "i18next": "^19.6.3",
+        "i18next-browser-languagedetector": "^5.0.0",
+        "i18next-fs-backend": "^1.0.7",
+        "i18next-http-backend": "^1.0.17",
+        "i18next-http-middleware": "^3.0.2",
+        "path-match": "^1.2.4",
+        "prop-types": "^15.6.2",
+        "react-i18next": "^11.7.3",
+        "url": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.10.0.tgz",
+          "integrity": "sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ=="
+        }
+      }
+    },
     "next-sitemap": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-1.6.18.tgz",
@@ -21581,12 +21916,52 @@
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true
     },
+    "path-match": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/path-match/-/path-match-1.2.4.tgz",
+      "integrity": "sha1-pidH88fgwlFHYml/JEQ1hbCRAOo=",
+      "requires": {
+        "http-errors": "~1.4.0",
+        "path-to-regexp": "^1.0.0"
+      },
+      "dependencies": {
+        "http-errors": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
+          "integrity": "sha1-bAJC3qaz33r9oVPHEImzHG6Cqr8=",
+          "requires": {
+            "inherits": "2.0.1",
+            "statuses": ">= 1.2.1 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+        }
+      }
+    },
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
       "dev": true
     },
+    "path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "requires": {
+        "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        }
+      }
+    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -22443,6 +22818,15 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-i18next": {
+      "version": "11.8.12",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.12.tgz",
+      "integrity": "sha512-M2PSVP9MzT/7yofXfCOF5gAVotinrM4BXWiguk8uFSznJsfFzTjrp3K9CBWcXitpoCBVZGZJ2AnbaWGSNkJqfw==",
+      "requires": {
+        "@babel/runtime": "^7.13.6",
+        "html-parse-stringify2": "^2.0.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25515,6 +25899,11 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+    },
     "watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",

package.json

@@ -71,6 +71,7 @@
     "js-cookie": "2.2.1",
     "lodash": "4.17.21",
     "next": "10.1.2",
+    "next-i18next": "^7.0.1",
     "normalize.css": "8.0.1",
     "react": "17.0.1",
     "react-beautiful-dnd": "13.1.0",

public/locales/en/common.json

@@ -0,0 +1,43 @@
+{
+  "Lue lisää": "Read more",
+  "lngButton": "Suomeksi",  "Hakemaasi sivua":
+  "Page",
+
+  "ei löydy":
+  "does not exist",
+
+  "Hups, tapahtui virhe": "Oops, an error occured",
+
+  "Lue lisää täältä": "More information here",
+  "Tärkeä tiedote!": "Important notice!",
+
+  "Katso kaikki tapahtumat":
+  "All events",
+
+  "Ilmoittaudu":
+  "Sign-up",
+
+  "Ilmoittautuminen":
+  "Sign-up",
+
+  "Peruuta":
+  "Cancel",
+
+  "Kokonaishinta":
+  "Total price",
+
+  "Ilmoittautuminen ei ole vielä auki!":
+  "Signup is not open yet!",
+
+  "Se aukeaa":
+  "Signup opens at",
+
+  "Ilmoittautumalla hyväksyn":
+  "By signing up I accept the",
+
+  "tietosuojaselosteen":
+  "privacy policy",
+
+  "ja tietojeni tallentamisen.":
+  "and storing of my data."
+}

public/locales/fi/common.json

@@ -0,0 +1,3 @@
+{
+  "lngButton": "In English"
+}

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;