From 473ec1e0dda7ee2fcdc1d2c4ddcd7eb81e6a2ce3 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Thu, 6 Oct 2022 12:45:51 +0530 Subject: [PATCH 1/7] chore: add next-i18n-next --- package-lock.json | 196 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 1 + 2 files changed, 187 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index aa68964cb..c737ec0f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "moment": "^2.29.4", "next": "^12.2.0", "next-auth": "^4.8.0", + "next-i18next": "^12.1.0", "next-transpile-modules": "^9.0.0", "nodemailer": "^6.7.8", "react": "17.0.2", @@ -959,6 +960,15 @@ "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" }, + "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==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -998,14 +1008,12 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { "version": "17.0.41", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.41.tgz", "integrity": "sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1015,8 +1023,7 @@ "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "node_modules/@types/uuid": { "version": "8.3.4", @@ -2108,6 +2115,16 @@ "url": "https://github.com/sponsors/mesqueeb" } }, + "node_modules/core-js": { + "version": "3.25.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.5.tgz", + "integrity": "sha512-nbm6eZSjm+ZuBQxCUPQKQCoUEfFOXjUZ8dTTyikyKaWrTYmAVbykQfwsKE5dBK88u3QCkCrzsx/PPlKfhsvgpw==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-pure": { "version": "3.25.1", "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz", @@ -3481,6 +3498,14 @@ "react-is": "^16.7.0" } }, + "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/human-signals": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz", @@ -3505,6 +3530,33 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/i18next": { + "version": "21.9.2", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.9.2.tgz", + "integrity": "sha512-00fVrLQOwy45nm3OtC9l1WiLK3nJlIYSljgCt0qzTaAy65aciMdRy9GsuW+a2AtKtdg9/njUGfRH30LRupV7ZQ==", + "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.17.2" + } + }, + "node_modules/i18next-fs-backend": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.1.5.tgz", + "integrity": "sha512-raTel3EfshiUXxR0gvmIoqp75jhkj8+7R1LjB006VZKPTFBbXyx6TlUVhb8Z9+7ahgpFbcQg1QWVOdf/iNzI5A==" + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -4590,6 +4642,41 @@ } } }, + "node_modules/next-i18next": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-12.1.0.tgz", + "integrity": "sha512-rhos/PVULmZPdC0jpec2MDBQMXdGZ3+Mbh/tZfrDtjgnVN3ucdq7k8BlwsJNww6FnqC8AC31n6dSYuqVzYsGsw==", + "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.18.9", + "@types/hoist-non-react-statics": "^3.3.1", + "core-js": "^3", + "hoist-non-react-statics": "^3.3.2", + "i18next": "^21.9.1", + "i18next-fs-backend": "^1.1.5", + "react-i18next": "^11.18.4" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "next": ">= 10.0.0", + "react": ">= 16.8.0" + } + }, "node_modules/next-transpile-modules": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz", @@ -5540,6 +5627,27 @@ "react-dom": ">=16" } }, + "node_modules/react-i18next": { + "version": "11.18.6", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", + "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==", + "dependencies": { + "@babel/runtime": "^7.14.5", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 19.0.0", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -6675,6 +6783,14 @@ "uuid": "dist/bin/uuid" } }, + "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/webcrypto-core": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz", @@ -7624,6 +7740,15 @@ "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" }, + "@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==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -7663,14 +7788,12 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/react": { "version": "17.0.41", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.41.tgz", "integrity": "sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA==", - "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -7680,8 +7803,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/uuid": { "version": "8.3.4", @@ -8429,6 +8551,11 @@ "is-what": "^4.1.6" } }, + "core-js": { + "version": "3.25.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.5.tgz", + "integrity": "sha512-nbm6eZSjm+ZuBQxCUPQKQCoUEfFOXjUZ8dTTyikyKaWrTYmAVbykQfwsKE5dBK88u3QCkCrzsx/PPlKfhsvgpw==" + }, "core-js-pure": { "version": "3.25.1", "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz", @@ -9458,6 +9585,14 @@ "react-is": "^16.7.0" } }, + "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==", + "requires": { + "void-elements": "3.1.0" + } + }, "human-signals": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz", @@ -9470,6 +9605,19 @@ "integrity": "sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==", "dev": true }, + "i18next": { + "version": "21.9.2", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.9.2.tgz", + "integrity": "sha512-00fVrLQOwy45nm3OtC9l1WiLK3nJlIYSljgCt0qzTaAy65aciMdRy9GsuW+a2AtKtdg9/njUGfRH30LRupV7ZQ==", + "requires": { + "@babel/runtime": "^7.17.2" + } + }, + "i18next-fs-backend": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.1.5.tgz", + "integrity": "sha512-raTel3EfshiUXxR0gvmIoqp75jhkj8+7R1LjB006VZKPTFBbXyx6TlUVhb8Z9+7ahgpFbcQg1QWVOdf/iNzI5A==" + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -10243,6 +10391,20 @@ "uuid": "^8.3.2" } }, + "next-i18next": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-12.1.0.tgz", + "integrity": "sha512-rhos/PVULmZPdC0jpec2MDBQMXdGZ3+Mbh/tZfrDtjgnVN3ucdq7k8BlwsJNww6FnqC8AC31n6dSYuqVzYsGsw==", + "requires": { + "@babel/runtime": "^7.18.9", + "@types/hoist-non-react-statics": "^3.3.1", + "core-js": "^3", + "hoist-non-react-statics": "^3.3.2", + "i18next": "^21.9.1", + "i18next-fs-backend": "^1.1.5", + "react-i18next": "^11.18.4" + } + }, "next-transpile-modules": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz", @@ -10864,6 +11026,15 @@ "goober": "^2.1.10" } }, + "react-i18next": { + "version": "11.18.6", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz", + "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==", + "requires": { + "@babel/runtime": "^7.14.5", + "html-parse-stringify": "^3.0.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -11622,6 +11793,11 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, + "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==" + }, "webcrypto-core": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.7.5.tgz", diff --git a/package.json b/package.json index 03373190c..8ed70b9c9 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "moment": "^2.29.4", "next": "^12.2.0", "next-auth": "^4.8.0", + "next-i18next": "^12.1.0", "next-transpile-modules": "^9.0.0", "nodemailer": "^6.7.8", "react": "17.0.2", From 8a37106050235da97e888211a31772367c22bf24 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Thu, 6 Oct 2022 12:46:11 +0530 Subject: [PATCH 2/7] feat: add i18n config --- next-i18next.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 next-i18next.config.js diff --git a/next-i18next.config.js b/next-i18next.config.js new file mode 100644 index 000000000..8374e5539 --- /dev/null +++ b/next-i18next.config.js @@ -0,0 +1,10 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const path = require("path"); + +module.exports = { + i18n: { + defaultLocale: "en", + locales: ["en"], + }, + localePath: path.resolve("./locales"), +}; From e49b27f730299d6cf927b20c3d0f6c43d28e1624 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Thu, 6 Oct 2022 12:46:37 +0530 Subject: [PATCH 3/7] feat: init i18n --- next.config.js | 2 ++ pages/_app.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index 71e344f18..8642cf1f9 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,6 @@ /* eslint @typescript-eslint/no-var-requires: "off" */ const withTM = require("next-transpile-modules")(["react-daisyui"]); +const { i18n } = require("./next-i18next.config"); /** @type {import('next').NextConfig} */ const nextConfig = withTM({ @@ -7,6 +8,7 @@ const nextConfig = withTM({ images: { domains: [], }, + i18n, }); module.exports = nextConfig; diff --git a/pages/_app.tsx b/pages/_app.tsx index a71843fc5..4b0b826df 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import { Toaster } from "react-hot-toast"; import { SessionProvider } from "next-auth/react"; - +import { appWithTranslation } from "next-i18next"; import type { AppPropsWithLayout } from "types"; import { AccountLayout } from "@/components/layouts"; import app from "@/lib/app"; @@ -27,4 +27,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { ); } -export default MyApp; +export default appWithTranslation(MyApp); From c7d4bc2193d5382d00f8211d37f297be33b2a0a9 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Thu, 6 Oct 2022 12:47:27 +0530 Subject: [PATCH 4/7] feat: add example i18n --- locales/en/dashboard.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 locales/en/dashboard.json diff --git a/locales/en/dashboard.json b/locales/en/dashboard.json new file mode 100644 index 000000000..0c0aec945 --- /dev/null +++ b/locales/en/dashboard.json @@ -0,0 +1,4 @@ +{ + "hi": "Hi", + "logged-in-using": "You have logged in using" +} From 5435b710d3bf16dad0d7af97dbce8e2750513e82 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Thu, 6 Oct 2022 12:48:08 +0530 Subject: [PATCH 5/7] feat: use i18n in dasboard page --- pages/dashboard.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 658a3e93d..fed737225 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -2,16 +2,20 @@ import { useSession } from "next-auth/react"; import type { NextPageWithLayout } from "types"; import { Card } from "@/components/ui"; +import { useTranslation } from "next-i18next"; const Dashboard: NextPageWithLayout = () => { const { data: session } = useSession(); + const { t } = useTranslation("dashboard"); return (

- {`Hi, ${session?.user.name} You have logged in using ${session?.user.email}`} + {`${t("hi")}, ${session?.user.name} ${t("logged-in-using")} ${ + session?.user.email + }`}

From ea98a7761400ce4b58f48e6d5851375b8b1059c6 Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Mon, 10 Oct 2022 23:12:33 +0530 Subject: [PATCH 6/7] refactor: rename to common --- locales/en/{dashboard.json => common.json} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename locales/en/{dashboard.json => common.json} (100%) diff --git a/locales/en/dashboard.json b/locales/en/common.json similarity index 100% rename from locales/en/dashboard.json rename to locales/en/common.json From 746b3b2e90d285b34c3b6e00d684ae10f918b61f Mon Sep 17 00:00:00 2001 From: nafees nazik Date: Mon, 10 Oct 2022 23:12:46 +0530 Subject: [PATCH 7/7] fix: change name sapce --- pages/dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index fed737225..92d4d8c65 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -6,7 +6,7 @@ import { useTranslation } from "next-i18next"; const Dashboard: NextPageWithLayout = () => { const { data: session } = useSession(); - const { t } = useTranslation("dashboard"); + const { t } = useTranslation("common"); return (