From bed81b0932283ed96599c0e48a3691be27bc9262 Mon Sep 17 00:00:00 2001 From: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> Date: Tue, 2 Apr 2024 15:04:42 +0200 Subject: [PATCH 01/64] Init i18next --- package-lock.json | 102 +++++++++++++++++++++++++--------- package.json | 3 + pages/_app.tsx | 1 + public/locales/sv/global.json | 3 + utils/i18n.ts | 15 +++++ 5 files changed, 99 insertions(+), 25 deletions(-) create mode 100644 public/locales/sv/global.json create mode 100644 utils/i18n.ts diff --git a/package-lock.json b/package-lock.json index 24d3c2e1..8626511e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,8 @@ "babel-plugin-styled-components": "^2.1.4", "chart.js": "^4.4.1", "deck.gl": "8.6.6", + "i18next": "^23.10.1", + "i18next-resources-to-backend": "^1.2.0", "jsdom": "^24.0.0", "md5": "^2.3.0", "next": "14.1.0", @@ -22,6 +24,7 @@ "react": "18.2.0", "react-chartjs-2": "^5.2.0", "react-cookie-consent": "^9.0.0", + "react-i18next": "^14.1.0", "react-mailchimp-subscribe": "^2.1.3", "styled-components": "^6.1.8", "vite": "^5.0.12" @@ -1891,11 +1894,11 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", - "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", + "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -6730,24 +6733,6 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", - "dev": true, - "dependencies": { - "regenerator-runtime": "^0.14.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/regenerator-runtime": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", - "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==", - "dev": true - }, "node_modules/eslint-plugin-react": { "version": "7.33.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz", @@ -7676,6 +7661,14 @@ "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", "dev": true }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/http-proxy-agent": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz", @@ -7751,6 +7744,36 @@ "node": ">=16.17.0" } }, + "node_modules/i18next": { + "version": "23.10.1", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.10.1.tgz", + "integrity": "sha512-NDiIzFbcs3O9PXpfhkjyf7WdqFn5Vq6mhzhtkXzj51aOcNuPNcTwuYNuXCpHsanZGHlHKL35G7huoFeVic1hng==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, + "node_modules/i18next-resources-to-backend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.0.tgz", + "integrity": "sha512-8f1l03s+QxDmCfpSXCh9V+AFcxAwIp0UaroWuyOx+hmmv8484GcELHs+lnu54FrNij8cDBEXvEwhzZoXsKcVpg==", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -9450,6 +9473,27 @@ "react": "^18.2.0" } }, + "node_modules/react-i18next": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.0.tgz", + "integrity": "sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.2.3", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -9521,9 +9565,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz", - "integrity": "sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==" + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regenerator-transform": { "version": "0.15.1", @@ -10805,6 +10849,14 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/w3c-xmlserializer": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", diff --git a/package.json b/package.json index 959b06a1..931a8865 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "babel-plugin-styled-components": "^2.1.4", "chart.js": "^4.4.1", "deck.gl": "8.6.6", + "i18next": "^23.10.1", + "i18next-resources-to-backend": "^1.2.0", "jsdom": "^24.0.0", "md5": "^2.3.0", "next": "14.1.0", @@ -26,6 +28,7 @@ "react": "18.2.0", "react-chartjs-2": "^5.2.0", "react-cookie-consent": "^9.0.0", + "react-i18next": "^14.1.0", "react-mailchimp-subscribe": "^2.1.3", "styled-components": "^6.1.8", "vite": "^5.0.12" diff --git a/pages/_app.tsx b/pages/_app.tsx index 0fc5c456..6aa62b14 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,7 @@ import CookieConsent from 'react-cookie-consent' import { NextPage } from 'next' import { ReactElement, ReactNode } from 'react' +import '../utils/i18n' import '../styles/globals.css' import Theme, { colorTheme } from '../Theme' diff --git a/public/locales/sv/global.json b/public/locales/sv/global.json new file mode 100644 index 00000000..bf6cf1ae --- /dev/null +++ b/public/locales/sv/global.json @@ -0,0 +1,3 @@ +{ + "welcome": "Välkommen" +} diff --git a/utils/i18n.ts b/utils/i18n.ts new file mode 100644 index 00000000..93301a94 --- /dev/null +++ b/utils/i18n.ts @@ -0,0 +1,15 @@ +import i18next from 'i18next' +import { initReactI18next } from 'react-i18next' +import resourcesToBackend from 'i18next-resources-to-backend' + +i18next + .use(initReactI18next) + .use( + resourcesToBackend( + (language: string, namespace: string) => + import(`./locales/${language}/${namespace}.json`), + ), + ) + .init({ + fallbackLng: 'sv', + }) From 30d23e815d14e2570b09aa28ad4a2e4dda77c462 Mon Sep 17 00:00:00 2001 From: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> Date: Mon, 8 Apr 2024 12:00:48 +0200 Subject: [PATCH 02/64] Remove unused file --- public/vercel.svg | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 public/vercel.svg diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25a..00000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file From e7518f2057ebaadb8dcea4da2634164a5cc702f9 Mon Sep 17 00:00:00 2001 From: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> Date: Mon, 8 Apr 2024 12:25:42 +0200 Subject: [PATCH 03/64] Switch to next-i18next --- next-i18next.config.js | 7 ++ next.config.js | 9 +-- package-lock.json | 64 +++++++++++++++---- package.json | 2 +- pages/_app.tsx | 5 +- .../locales/sv/{global.json => common.json} | 0 utils/i18n.ts | 15 ----- 7 files changed, 66 insertions(+), 36 deletions(-) create mode 100644 next-i18next.config.js rename public/locales/sv/{global.json => common.json} (100%) delete mode 100644 utils/i18n.ts diff --git a/next-i18next.config.js b/next-i18next.config.js new file mode 100644 index 00000000..54047bf9 --- /dev/null +++ b/next-i18next.config.js @@ -0,0 +1,7 @@ +/** @type {import('next-i18next').UserConfig} */ +module.exports = { + i18n: { + defaultLocale: 'sv', + locales: ['sv'], + }, +} diff --git a/next.config.js b/next.config.js index bc68eda6..cea97c26 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ -/** @type {require('next').NextConfig} */ +const { i18n } = require('./next-i18next.config') // eslint-disable-next-line @typescript-eslint/no-var-requires const withBundleAnalyzer = require('@next/bundle-analyzer')({ @@ -17,12 +17,7 @@ module.exports = withBundleAnalyzer({ }, reactStrictMode: true, - - // i18n configuration - i18n: { - locales: ['sv'], - defaultLocale: 'sv', - }, + i18n, // Redirects configuration async redirects() { diff --git a/package-lock.json b/package-lock.json index 8626511e..e1379815 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,10 +16,10 @@ "chart.js": "^4.4.1", "deck.gl": "8.6.6", "i18next": "^23.10.1", - "i18next-resources-to-backend": "^1.2.0", "jsdom": "^24.0.0", "md5": "^2.3.0", "next": "14.1.0", + "next-i18next": "^15.2.0", "nextjs-progressbar": "^0.0.16", "react": "18.2.0", "react-chartjs-2": "^5.2.0", @@ -4073,9 +4073,9 @@ "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==" }, "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", "dependencies": { "@types/react": "*", "hoist-non-react-statics": "^3.3.0" @@ -5695,6 +5695,16 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, + "node_modules/core-js": { + "version": "3.36.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.1.tgz", + "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-compat": { "version": "3.30.2", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.2.tgz", @@ -7766,13 +7776,10 @@ "@babel/runtime": "^7.23.2" } }, - "node_modules/i18next-resources-to-backend": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.0.tgz", - "integrity": "sha512-8f1l03s+QxDmCfpSXCh9V+AFcxAwIp0UaroWuyOx+hmmv8484GcELHs+lnu54FrNij8cDBEXvEwhzZoXsKcVpg==", - "dependencies": { - "@babel/runtime": "^7.23.2" - } + "node_modules/i18next-fs-backend": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.1.tgz", + "integrity": "sha512-tvfXskmG/9o+TJ5Fxu54sSO5OkY6d+uMn+K6JiUGLJrwxAVfer+8V3nU8jq3ts9Pe5lXJv4b1N7foIjJ8Iy2Gg==" }, "node_modules/iconv-lite": { "version": "0.4.24", @@ -8834,6 +8841,41 @@ } } }, + "node_modules/next-i18next": { + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-15.2.0.tgz", + "integrity": "sha512-Rl5yZ4oGffsB0AjRykZ5PzNQ2M6am54MaMayldGmH/UKZisrIxk2SKEPJvaHhKlWe1qgdNi2FkodwK8sEjfEmg==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + }, + { + "type": "individual", + "url": "https://locize.com" + } + ], + "dependencies": { + "@babel/runtime": "^7.23.2", + "@types/hoist-non-react-statics": "^3.3.4", + "core-js": "^3", + "hoist-non-react-statics": "^3.3.2", + "i18next-fs-backend": "^2.3.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "i18next": ">= 23.7.13", + "next": ">= 12.0.0", + "react": ">= 17.0.2", + "react-i18next": ">= 13.5.0" + } + }, "node_modules/nextjs-progressbar": { "version": "0.0.16", "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz", diff --git a/package.json b/package.json index 931a8865..400493f2 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ "chart.js": "^4.4.1", "deck.gl": "8.6.6", "i18next": "^23.10.1", - "i18next-resources-to-backend": "^1.2.0", "jsdom": "^24.0.0", "md5": "^2.3.0", "next": "14.1.0", + "next-i18next": "^15.2.0", "nextjs-progressbar": "^0.0.16", "react": "18.2.0", "react-chartjs-2": "^5.2.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 6aa62b14..162b0ac3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,8 +5,9 @@ import Script from 'next/script' import CookieConsent from 'react-cookie-consent' import { NextPage } from 'next' import { ReactElement, ReactNode } from 'react' +import { appWithTranslation } from 'next-i18next' -import '../utils/i18n' +// import '../utils/i18n' import '../styles/globals.css' import Theme, { colorTheme } from '../Theme' @@ -94,4 +95,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { ) } -export default MyApp +export default appWithTranslation(MyApp) diff --git a/public/locales/sv/global.json b/public/locales/sv/common.json similarity index 100% rename from public/locales/sv/global.json rename to public/locales/sv/common.json diff --git a/utils/i18n.ts b/utils/i18n.ts deleted file mode 100644 index 93301a94..00000000 --- a/utils/i18n.ts +++ /dev/null @@ -1,15 +0,0 @@ -import i18next from 'i18next' -import { initReactI18next } from 'react-i18next' -import resourcesToBackend from 'i18next-resources-to-backend' - -i18next - .use(initReactI18next) - .use( - resourcesToBackend( - (language: string, namespace: string) => - import(`./locales/${language}/${namespace}.json`), - ), - ) - .init({ - fallbackLng: 'sv', - }) From ea4757d974f1bb7b8b9bf0fec04d1ded350a6d9c Mon Sep 17 00:00:00 2001 From: Samuel Plumppu <6125097+Greenheart@users.noreply.github.com> Date: Mon, 8 Apr 2024 13:31:49 +0200 Subject: [PATCH 04/64] Add configuration and translate cookie banner --- next-i18next.config.js | 5 +++ pages/404.tsx | 8 +++++ pages/500.tsx | 48 ++++++++++++++++++++++++++++ pages/[dataset]/[dataView]/index.tsx | 6 +++- pages/[dataset]/index.tsx | 6 +++- pages/_app.tsx | 18 ++++++++--- pages/index.tsx | 8 ++++- public/locales/sv/common.json | 7 +++- 8 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 pages/500.tsx diff --git a/next-i18next.config.js b/next-i18next.config.js index 54047bf9..796b6267 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -1,7 +1,12 @@ +const path = require('path') + /** @type {import('next-i18next').UserConfig} */ module.exports = { i18n: { defaultLocale: 'sv', locales: ['sv'], }, + localePath: path.resolve('./public/locales'), + // Allow reloading translations without restarting the dev server. + reloadOnPrerender: true, } diff --git a/pages/404.tsx b/pages/404.tsx index 0c62be58..c0b6d5b6 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,5 +1,7 @@ import router from 'next/router' import styled from 'styled-components' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { GetStaticProps } from 'next' import { H1 } from '../components/Typography' const Wrapper = styled.div` @@ -37,4 +39,10 @@ function FourOhFour() { ) } +export const getStaticProps: GetStaticProps = async ({ locale }) => ({ + props: { + ...await serverSideTranslations(locale, ['common']), + }, +}) + export default FourOhFour diff --git a/pages/500.tsx b/pages/500.tsx new file mode 100644 index 00000000..56a8bfb1 --- /dev/null +++ b/pages/500.tsx @@ -0,0 +1,48 @@ +import router from 'next/router' +import styled from 'styled-components' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { GetStaticProps } from 'next' +import { H1 } from '../components/Typography' + +const Wrapper = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +` + +const Button = styled.button` + height: 56px; + background: ${({ theme }) => theme.midGreen}; + border: 0; + border-radius: 4px; + font-weight: bold; + font-size: 16px; + cursor: pointer; + width: 100%; + &:hover { + background: ${({ theme }) => theme.lightGreen}; + } +` + +function FourOhFour() { + const handleClick = () => { + router.push('/') + } + + return ( + +

500 - Något gick fel!

+ + + ) +} + +export const getStaticProps: GetStaticProps = async ({ locale }) => ({ + props: { + ...await serverSideTranslations(locale as string, ['common']), + }, +}) + +export default FourOhFour diff --git a/pages/[dataset]/[dataView]/index.tsx b/pages/[dataset]/[dataView]/index.tsx index 00409ab5..62cfac85 100644 --- a/pages/[dataset]/[dataView]/index.tsx +++ b/pages/[dataset]/[dataView]/index.tsx @@ -1,5 +1,6 @@ import { GetServerSideProps } from 'next' import { ParsedUrlQuery } from 'querystring' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { Municipality as TMunicipality } from '../../../utils/types' import StartPage from '../..' import { ClimateDataService } from '../../../utils/climateDataService' @@ -14,7 +15,9 @@ interface Params extends ParsedUrlQuery { const cache = new Map() -export const getServerSideProps: GetServerSideProps = async ({ params, res }) => { +export const getServerSideProps: GetServerSideProps = async ({ + params, res, locale, +}) => { const dataset = (params as Params).dataset as string const dataView = (params as Params).dataView as string @@ -48,6 +51,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params, res }) => props: { municipalities, normalizedDataset, + ...await serverSideTranslations(locale as string, 'common'), }, } diff --git a/pages/[dataset]/index.tsx b/pages/[dataset]/index.tsx index 3738d46a..f7d19b52 100644 --- a/pages/[dataset]/index.tsx +++ b/pages/[dataset]/index.tsx @@ -1,5 +1,6 @@ import { GetServerSideProps } from 'next' import { ParsedUrlQuery } from 'querystring' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { defaultDataView } from '../../utils/datasetDefinitions' import { isValidDataset, normalizeString } from '../../utils/shared' @@ -7,7 +8,7 @@ interface Params extends ParsedUrlQuery { id: string } -export const getServerSideProps: GetServerSideProps = async ({ params }) => { +export const getServerSideProps: GetServerSideProps = async ({ params, locale }) => { const dataset = (params as Params).dataset as string const normalizedDataset = normalizeString(dataset) @@ -23,6 +24,9 @@ export const getServerSideProps: GetServerSideProps = async ({ params }) => { permanent: true, shallow: true, }, + props: { + ...await serverSideTranslations(locale as string, 'common'), + }, } } diff --git a/pages/_app.tsx b/pages/_app.tsx index 162b0ac3..da744cc9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,12 +3,12 @@ import type { AppProps } from 'next/app' import Head from 'next/head' import Script from 'next/script' import CookieConsent from 'react-cookie-consent' -import { NextPage } from 'next' +import { GetStaticProps, NextPage } from 'next' import { ReactElement, ReactNode } from 'react' -import { appWithTranslation } from 'next-i18next' +import { appWithTranslation, useTranslation } from 'next-i18next' -// import '../utils/i18n' import '../styles/globals.css' +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import Theme, { colorTheme } from '../Theme' type NextPageWithLayout = NextPage & { @@ -21,6 +21,8 @@ type AppPropsWithLayout = AppProps & { function MyApp({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => page) + const { t } = useTranslation() + return ( <>