{"id":51483582,"url":"https://github.com/tanmayshil/next-language-translate","last_synced_at":"2026-07-07T04:01:24.460Z","repository":{"id":360629826,"uuid":"1250971813","full_name":"TanmayShil/next-language-translate","owner":"TanmayShil","description":"A modern multilingual product landing page built with Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, Magic UI, React Query, and i18next. Supports English, Hindi, and Bengali translations for both static UI text and dynamic FakeStore API product data using google-translate-api-x.","archived":false,"fork":false,"pushed_at":"2026-05-27T07:26:30.000Z","size":323,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-27T08:25:53.820Z","etag":null,"topics":["fakestoreapi","google-translate-api","i18n-react","i18next","internationalization","language-switcher","magicui","multilingual","nextjs","shadcn-ui","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://next-language-translate.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TanmayShil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-27T06:06:09.000Z","updated_at":"2026-05-27T07:26:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/TanmayShil/next-language-translate","commit_stats":null,"previous_names":["tanmayshil/next-language-translate"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/TanmayShil/next-language-translate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmayShil%2Fnext-language-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmayShil%2Fnext-language-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmayShil%2Fnext-language-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmayShil%2Fnext-language-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TanmayShil","download_url":"https://codeload.github.com/TanmayShil/next-language-translate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TanmayShil%2Fnext-language-translate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35213824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-07T02:00:07.222Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fakestoreapi","google-translate-api","i18n-react","i18next","internationalization","language-switcher","magicui","multilingual","nextjs","shadcn-ui","tailwindcss","typescript"],"created_at":"2026-07-07T04:01:23.378Z","updated_at":"2026-07-07T04:01:24.453Z","avatar_url":"https://github.com/TanmayShil.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Next.js Language Translator Store 🌍\n\nA modern multilingual product landing page built with Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, Magic UI, React Query, and i18next.\nThe application supports dynamic language translation for both static UI text and API product data using google-translate-api-x.\n\n\n### 🚀 Features\n---\n### 🌐 Multi-language support\n- English\n- Hindi\n- Bengali\n### 🎨 Modern UI using:\n- Tailwind CSS\n- shadcn/ui\n- Magic UI\n### 📦 Product listing using FakeStore API\n### 🔄 Dynamic product translation\n- Product title\n- Description\n- Category\n### ⚡ React Query caching\n### 🌍 Language auto-detection using:\n- i18next-browser-languagedetector\n### 🧠 Custom translation hooks\n\n---\n### 🛠 Tech Stack\n\n| Technology             | Purpose                 |\n| ---------------------- | ----------------------- |\n| Next.js                | React Framework         |\n| TypeScript             | Type Safety             |\n| Tailwind CSS           | Styling                 |\n| shadcn/ui              | UI Components           |\n| Magic UI               | Animation/UI Effects    |\n| i18next                | Internationalization    |\n| React Query            | API State Management    |\n| FakeStore API          | Product Data            |\n| google-translate-api-x | Dynamic Translation API |\n\n---\n### 📂 Project Structure\n\n```\n├── 📁 public/\n│   ├── 🖼️ file.svg\n│   ├── 🖼️ globe.svg\n│   ├── 🖼️ next.svg\n│   ├── 🖼️ vercel.svg\n│   └── 🖼️ window.svg\n├── 📁 src/\n│   ├── 📁 @type/\n│   │   └── 📄 product.ts\n│   ├── 📁 JSON/\n│   │   ├── 📁 data/\n│   │   │   ├── 📄 about.ts\n│   │   │   └── 📄 contact.ts\n│   │   └── 📁 lottie/\n│   ├── 📁 api/\n│   │   ├── 📄 api.function.ts\n│   │   └── 📄 axios.instance.ts\n│   ├── 📁 app/\n│   │   ├── 📁 (userpannel)/\n│   │   │   ├── 📄 layout.tsx\n│   │   │   └── 📄 page.tsx\n│   │   ├── 📁 api/\n│   │   │   └── 📁 translate/\n│   │   │       └── 📄 route.ts\n│   │   ├── 📄 favicon.ico\n│   │   ├── 🎨 globals.css\n│   │   ├── 📄 layout.tsx\n│   │   └── 📄 providers.tsx\n│   ├── 📁 assets/\n│   │   ├── 📁 json/\n│   │   │   └── ⚙️ about.json\n│   │   ├── 🖼️ banner1.jpg\n│   │   ├── 🖼️ banner2.jpg\n│   │   └── 🖼️ banner3.jpg\n│   ├── 📁 components/\n│   │   ├── 📁 ui/\n│   │   │   ├── 📄 badge.tsx\n│   │   │   ├── 📄 border-beam.tsx\n│   │   │   ├── 📄 button.tsx\n│   │   │   ├── 📄 card.tsx\n│   │   │   ├── 📄 input.tsx\n│   │   │   ├── 📄 lens.tsx\n│   │   │   ├── 📄 magic-card.tsx\n│   │   │   ├── 📄 morphing-text.tsx\n│   │   │   ├── 📄 scroll-area.tsx\n│   │   │   ├── 📄 select.tsx\n│   │   │   ├── 📄 separator.tsx\n│   │   │   ├── 📄 shimmer-button.tsx\n│   │   │   ├── 📄 sparkles-text.tsx\n│   │   │   ├── 📄 textarea.tsx\n│   │   │   └── 📄 tooltip.tsx\n│   │   ├── 📄 LanguageSwitcher.tsx\n│   │   ├── 📄 ProductCard.tsx\n│   │   ├── 📄 ProductSkleton.tsx\n│   │   └── 📄 ThemeToggle.tsx\n│   ├── 📁 hook/\n│   │   ├── 📄 useProducts.ts\n│   │   └── 📄 useTranslate.ts\n│   ├── 📁 i18n/\n│   │   ├── 📁 locales/\n│   │   │   ├── ⚙️ bn.json\n│   │   │   ├── ⚙️ en.json\n│   │   │   └── ⚙️ hi.json\n│   │   └── 📄 index.ts\n│   ├── 📁 layout/\n│   │   ├── 📄 Footer.tsx\n│   │   └── 📄 Navbar.tsx\n│   ├── 📁 lib/\n│   │   └── 📄 utils.ts\n│   └── 📁 section/\n│       ├── 📄 About.tsx\n│       ├── 📄 Banner.tsx\n│       ├── 📄 Contact.tsx\n│       └── 📄 Products.tsx\n├── ⚙️ .gitignore\n├── 📝 AGENTS.md\n├── 📝 CLAUDE.md\n├── 📝 README.md\n├── ⚙️ components.json\n├── 📄 eslint.config.mjs\n├── 📄 next.config.ts\n├── ⚙️ package-lock.json\n├── ⚙️ package.json\n├── 📄 postcss.config.mjs\n└── ⚙️ tsconfig.json\n```\n---\n### 📌 Step 1 — Install Dependencies\n```\nnpm install i18next react-i18next i18next-browser-languagedetector\nnpm install @tanstack/react-query\nnpm install google-translate-api-x\nnpx shadcn@latest init\n```\n---\n### 📌 Step 2 — Configure i18next\n---\n## What is i18next? 🌍\ni18next is an internationalization library used for translating static UI text.\n\nExample:\n```\nt(\"About Us\")\n```\nDepending on selected language:\n| Language | Output          |\n| -------- | --------------- |\n| English  | About Us        |\n| Hindi    | हमारे बारे में  |\n| Bengali  | আমাদের সম্পর্কে |\n\n---\n## Why Use i18next?\nBecause:\n- Easy translation management\n- Multi-language support\n- Automatic language detection\n- Reusable translation keys\n- Supports React perfectly\n---\n## i18n Configuration\n```\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\n\nimport en from \"@/locales/en/common.json\";\nimport hi from \"@/locales/hi/common.json\";\nimport bn from \"@/locales/bn/common.json\";\n\ni18n\n  .use(LanguageDetector)\n  .use(initReactI18next)\n  .init({\n    resources: {\n      en: {\n        translation: en,\n      },\n      hi: {\n        translation: hi,\n      },\n      bn: {\n        translation: bn,\n      },\n    },\n\n    fallbackLng: \"en\",\n    interpolation: {\n      escapeValue: false,\n    },\n  });\n\nexport default i18n;\n```\n---\n### 📌 Step 3 — Translation JSON Files\n\n## locales/en/common.json\n```\n{\n  \"About Us\": \"About Us\",\n  \"Contact\": \"Contact\",\n  \"Add To Cart\": \"Add To Cart\"\n}\n```\n## locales/hi/common.json\n```\n{\n  \"About Us\": \"हमारे बारे में\",\n  \"Contact\": \"संपर्क करें\",\n  \"Add To Cart\": \"कार्ट में जोड़ें\"\n}\n```\n## locales/bn/common.json\n```\n{\n  \"About Us\": \"আমাদের সম্পর্কে\",\n  \"Contact\": \"যোগাযোগ\",\n  \"Add To Cart\": \"কার্টে যোগ করুন\"\n}\n```\n---\n### 📌 Step 4 — Why Static Translation Is Not Enough?\ni18next works perfectly for static text.\nBut API product data comes dynamically:\n```\ntitle\ndescription\ncategory\n```\nThese values are not stored in JSON files.\nSo we need:\n✅ Backend Translation API\n\n---\n### 📌 Step 5 — Create Translation API Route\n\n## Why API Route?\nBecause:\n- Dynamic product data changes\n- We cannot manually store all translations\n- API translates text in real-time\n  \n## app/api/translate/route.ts\n```\nimport { NextRequest, NextResponse } from \"next/server\";\nimport translate from \"google-translate-api-x\";\n\nimport {\n  RequestBody,\n  TranslationResponse,\n} from \"@/@type/product\";\n\nexport async function POST(\n  req: NextRequest,\n): Promise\u003cNextResponse\u003cTranslationResponse\u003e\u003e {\n\n  let body: RequestBody | null = null;\n\n  try {\n    body = await req.json();\n\n    const result = await translate(body?.text || \"\", {\n      to: body?.target || \"\",\n    });\n\n    return NextResponse.json\u003cTranslationResponse\u003e({\n      translatedText: result.text,\n    });\n\n  } catch (error) {\n\n    console.log(error);\n\n    return NextResponse.json\u003cTranslationResponse\u003e(\n      {\n        translatedText: body?.text || \"\",\n      },\n      {\n        status: 500,\n      },\n    );\n  }\n}\n```\n---\n### 📌 Step 6 — Why google-translate-api-x?\nThis package helps:\n- Translate dynamic text\n- No Google Cloud billing setup\n- Easy integration\n- Supports many languages\n  \n---\n### 📌 Step 7 — Create Translation Function\n## api/api.function.ts\n```\nexport const translateTextFns = async (\n  text: string,\n  target: string,\n) =\u003e {\n  const response = await axios.post(\"/api/translate\", {\n      text,\n      target,\n    });\n  return response.data.translatedText;\n};\n```\n\n---\n### 📌 Step 8 — Why TanStack Query?\nWithout TanStack Query:\n- Multiple API calls happen\n- Performance becomes slow\n\nTanStack Query:\n- ✅ Caches translations\n- ✅ Avoids duplicate requests\n- ✅ Improves performance\n\n---\n### 📌 Step 9 — Final Workflow\n```\nUser changes language\n        ↓\ni18next updates static text\n        ↓\nReact Query detects language change\n        ↓\nTranslation hooks call API\n        ↓\nAPI translates product data\n        ↓\nUI updates dynamically\n```\n---\n## 🙋‍♂️ Author\n\nMade with ❤️ by Tanmay Shil\nGitHub: [@TanmayShil](https://github.com/TanmayShil)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanmayshil%2Fnext-language-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanmayshil%2Fnext-language-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanmayshil%2Fnext-language-translate/lists"}