feat: add i18n

README.md

@@ -2,16 +2,16 @@
 
 [ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter) expansion pack
 
-
 ## Roadmap
 
 - [x] React Hook Form + Form Input Components
 - [x] Storybook
 - [x] Cypress
 - [ ] Authentication with Zustand
-- [X] [Toast with React Query / SWR](https://theodorusclarence.com/blog/react-loading-state-pattern)
+- [x] [Toast with React Query / SWR](https://theodorusclarence.com/blog/react-loading-state-pattern)
 - [x] [Dialog Manager with Zustand](https://github.com/theodorusclarence/dialog-manager)
 - [x] NProgress
+- [x] I18n with next-i18next
 
 ## React Hook Form
 
@@ -68,3 +68,11 @@ curl -s https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/
 ```bash
 curl -s https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/nprogress/trigger.sh | bash -s
 ```
+
+## next-i18next
+
+[See the readme](https://github.com/theodorusclarence/expansion-pack/blob/main/next-i18next/README.md)
+
+```bash
+curl -s https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/next-i18next/trigger.sh | bash -s
+```

next-i18next/README.md

@@ -0,0 +1,20 @@
+# next-i18next
+
+next-i18next started as a standalone OSS project and now officially be part of [i18next](https://github.com/i18next)
+
+## Installed Packages
+
+- **next-i18next**, i18n (internationalization) library
+
+## Notes
+
+There are two steps that we need to manually take after finish running `curl` command
+
+- update `next.config.js` with the content of `next.config.expansion.js`
+- wrap MyApp export in `_app.tsx` file with appWithTranslation HOC, see `next-i18next-_app.tsx` as reference
+
+> (you can safely delete `next.config.expansion.js` and `next-i18next-_app.tsx` after the updates made)
+
+visit `/next-i18next-example` & `/id/next-i18next-example` to check if the translation is working
+
+More on docs [next-i18next](https://github.com/i18next/next-i18next)

next-i18next/next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "id"],
+  },
+};

next-i18next/next.config.expansion.js

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { i18n } = require("./next-i18next.config");
+
+module.exports = {
+  // Add this manually to main next.config.js to prevent conflict
+  i18n,
+};

next-i18next/public/locales/en/common.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Hello World"
+}

next-i18next/public/locales/id/common.json

@@ -0,0 +1,3 @@
+{
+  "hello-world": "Halo Dunia"
+}

next-i18next/src/pages/next-i18next-_app.tsx

@@ -0,0 +1,9 @@
+import { AppProps } from "next/app";
+import { appWithTranslation } from "next-i18next";
+
+const MyApp = ({ Component, pageProps }: AppProps) => (
+  <Component {...pageProps} />
+);
+
+// Wrap MyApp with appWithTranslation HOC manually to prevent conflict
+export default appWithTranslation(MyApp);

next-i18next/src/pages/next-i18next-example.tsx

@@ -0,0 +1,20 @@
+import { GetStaticProps } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+const TranslationExample = () => {
+  const { t } = useTranslation();
+
+  return <div>{t("hello-world")}</div>;
+};
+
+export default TranslationExample;
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      ...(locale && (await serverSideTranslations(locale, ["common"]))),
+      // Will be passed to the page component as props
+    },
+  };
+};

next-i18next/trigger.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+RED='\033[0;31m'
+GREEN='\033[1;32m'
+CYAN='\033[1;36m'
+NC='\033[0m'
+
+
+echo -e "${CYAN}========================="
+echo "next-i18next Expansion"
+echo "========================="
+echo -e "${NC}"
+
+#region  //*=========== Install Packages ===========
+echo -e "${NC}"
+echo -e "${GREEN}[Step 1] Installing additional packages${NC}"
+echo ""
+echo -e "Packages: ${GREEN}next-i18next"
+echo -e "${NC}"
+yarn add next-i18next
+# endregion  //*======== Install Packages ===========
+
+#region  //*=========== Create Directories ===========
+mkdir -p public/locales/en
+mkdir -p public/locales/id
+#endregion  //*======== Create Directories ===========
+
+#region  //*=========== Downloading Files ===========
+echo ""
+echo -e "${GREEN}[Step 2] Downloading files${NC}"
+echo ""
+
+DIRNAME="next-i18next"
+
+files=(
+  "src/pages/next-i18next-_app.tsx"
+  "src/pages/next-i18next-example.tsx"
+  "public/locales/en/common.json"
+  "public/locales/id/common.json"
+  "next-i18next.config.js"
+  "next.config.expansion.js"
+)
+
+for i in "${files[@]}"
+do
+  echo "Downloading... $i"
+  curl -LJs -o $i https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/$DIRNAME/$i
+done
+#endregion  //*======== Downloading Files ===========
+
+echo ""
+echo -e "${CYAN}============================================"
+echo "🔋 next-i18next Expansion Completed"
+echo -e "${RED}REQUIRED ACTIONS${NC} update '_app.tsx' component with the content of 'src/pages/next-i18next-_app.tsx' manually to avoid conflicts${CYAN}"
+echo -e "${RED}REQUIRED ACTIONS${NC} update main 'next.config.js' with the content of next.config.expansion.js manually to avoid conflicts${CYAN}"
+