{"id":21663681,"url":"https://github.com/rrameshbtech/nx-sample-react","last_synced_at":"2026-05-11T07:36:22.755Z","repository":{"id":98608238,"uuid":"467489696","full_name":"rrameshbtech/nx-sample-react","owner":"rrameshbtech","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-17T05:54:00.000Z","size":1230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-25T07:41:34.825Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rrameshbtech.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}},"created_at":"2022-03-08T11:47:25.000Z","updated_at":"2022-03-08T11:58:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"7cd6f1ff-6fc0-4884-a856-fcc8714f24b7","html_url":"https://github.com/rrameshbtech/nx-sample-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrameshbtech%2Fnx-sample-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrameshbtech%2Fnx-sample-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrameshbtech%2Fnx-sample-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrameshbtech%2Fnx-sample-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rrameshbtech","download_url":"https://codeload.github.com/rrameshbtech/nx-sample-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244560393,"owners_count":20472220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-25T10:27:51.574Z","updated_at":"2026-05-11T07:36:17.711Z","avatar_url":"https://github.com/rrameshbtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nx-sample-react\nThis is an nx sample project which contains sample implementation for below scenarios.\n1. How to use theme using `emotionJS` frameworks? Theme \u0026 icons needs to be different for different projects.\n2. How to implement localisation using `next-i18next`?\n  a. How to keep locale files common to libs?\n  b. How \u0026 where to locate locale files for specific libs?\n  c. How to consume libs with translation.\n\n## Tech stacks\n1. Nx\n2. React\n3. NextJS\n4. TypeScript\n5. emotion\n6. next-i18next\n## Localisation using next-i18next\nCreate a common lib which handles translation related common functionalities. In our case it is named `translator`.\n\n### Folder Structure\n### Rules followed\n* Keep app specific config \u0026 locales in app folder\n* Keep locales \u0026 configs common to all apps in `translator` lib.\n* Keep locales specific to any UI component lib in the same lib\n\n![Folder structure for nexti18next](./docs/nexti18n-local-folder-structure.png \"Localisation folder structure\")\n\n### How it works?\n\n1. `Translator` lib wraps the default i18n behavious \u0026 add the default configs to i18n functions.\n2. Custom executor called `copy-locales` is performs below functions on serve \u0026 build.\n    i. Create symlink in root folder for currently running app's nexti18next.config.js config.\n    ii. Copy locales from dependent libs of the folder to application's `public/locales` folder\n3. So by default locales \u0026 configs are consumed from the respective locations.\n\n### What you should do?\n1. Follow the given folder structure.\n2. Add `locales` target in the newly created application's `project.json` folder. Use below code block\n    ```\n    \"locales\": {\n      \"executor\": \"./tools/executors/copy-locales:copy-locales\",\n      \"options\": {\n        \"libs\": [\"translator\", \"lib1\"]\n      }\n    }\n    ```\n3. Add `locales` are the dependency to your applicaiton's `serve` and `build` targets.\n  ```\n  \"dependsOn\": [\n    {\n      \"target\": \"locales\",\n      \"projects\": \"self\"\n    }\n  ]\n  ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrameshbtech%2Fnx-sample-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frrameshbtech%2Fnx-sample-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrameshbtech%2Fnx-sample-react/lists"}