{"id":19384627,"url":"https://github.com/brunos3d/nextjs-nx-module-federation","last_synced_at":"2026-03-08T09:35:28.783Z","repository":{"id":37542697,"uuid":"505934191","full_name":"brunos3d/nextjs-nx-module-federation","owner":"brunos3d","description":"This is an example project to demonstrate how to use Nx, Next.js and Module Federation together.","archived":false,"fork":false,"pushed_at":"2023-04-25T21:50:56.000Z","size":7818,"stargazers_count":26,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-02T02:12:37.936Z","etag":null,"topics":["design-system","example","javascript","microfrontend","module-federation","monorepo","nextjs","nx","react","template","tutorial","typescript","vercel","webpack"],"latest_commit_sha":null,"homepage":"https://nextjs-nx-module-federation-store.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/brunos3d.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}},"created_at":"2022-06-21T17:04:25.000Z","updated_at":"2024-03-12T12:43:40.000Z","dependencies_parsed_at":"2022-07-14T16:01:11.657Z","dependency_job_id":null,"html_url":"https://github.com/brunos3d/nextjs-nx-module-federation","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/brunos3d%2Fnextjs-nx-module-federation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-nx-module-federation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-nx-module-federation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-nx-module-federation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunos3d","download_url":"https://codeload.github.com/brunos3d/nextjs-nx-module-federation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223936134,"owners_count":17228099,"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":["design-system","example","javascript","microfrontend","module-federation","monorepo","nextjs","nx","react","template","tutorial","typescript","vercel","webpack"],"created_at":"2024-11-10T09:31:45.266Z","updated_at":"2026-03-08T09:35:28.749Z","avatar_url":"https://github.com/brunos3d.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nextjs, Nx and Module Federation\n\nThis is an example project to demonstrate how to use Nx, Next.js and Module Federation together.\n\n\u003e ⚠ This example depends on [@module-federation/nextjs-mf](https://app.privjs.com/package?pkg=@module-federation/nextjs-mf). It will not work unless you have access to this plugin, which is not free.\n\n## Articles\n\nAlso this project was created as a proof of concept to write one article, you can read it here:\n\n- 🇬🇧 [English](https://brunos3d.notion.site/Nx-Next-js-and-Module-Federation-EN-US-9c945124ddc246a8b8ca0b5a4a4343a7)\n- 🇧🇷 [Portuguese (pt-br)](https://brunos3d.notion.site/Nx-Next-js-e-Module-Federation-PT-BR-7602efbb3b3c41468e961fac5a5b9605)\n\n## Techs \u0026 Tools\n\nThis project came with some powerful tools\n\n### Core\n\n- [Nx](https://nx.dev/)\n- [Next.js](https://nextjs.org/)\n- [Webpack](https://webpack.js.org/)\n\n### Plugins\n\n- [Nx + Next.js plugin](https://nx.dev/packages/next)\n- [@module-federation/nextjs-mf](https://app.privjs.com/package?pkg=@module-federation/nextjs-mf)\n\n### Linting \u0026 Tests\n\n- [Jest](https://jestjs.io/)\n- [Cypress](https://www.cypress.io/)\n- [ESLint](https://eslint.org/)\n- [Prettier](https://prettier.io/)\n\n### 3rd party components\n\n- [reactstrap](https://reactstrap.github.io/)\n\n## Remotes\n\n- Checkout ([preview](https://nextjs-nx-module-federation-checkout.vercel.app))\n- Store ([preview](https://nextjs-nx-module-federation-store.vercel.app))\n\n## Running in the development environment\n\n\u003e To run the project you have to use [Nx CLI](https://nx.dev/using-nx/nx-cli)\n\nTo start the project in development mode you can just run:\n\n```bash\nnpx nx serve store\n```\n\nThis will start the `store` application, also you can run all apps by using:\n\n```bash\nnpx nx run-many --target=serve --all\n```\n\n## Creating new apps\n\nYou can creating new applications on this workspace using some [Nx Generators](https://nx.dev/generators/using-generators) from this [Nx + Next.js plugin](https://nx.dev/packages/next) like the command bellow:\n\n```bash\nnpx nx g @nrwl/next:app app-name\n```\n\n## Creating new pages\n\nTo generate new pages you can just use:\n\n```bash\nnpx nx g @nrwl/next:page new-page --project=app-name\n```\n\n## Creating new components\n\nTo generate new components you can just use:\n\n```bash\nnpx nx g @nrwl/next:component new-component --project=app-name\n```\n\n## Creating libraries\n\nYou can also use @nrwl/next plugin to generate libs, shared ui elements, design-system, etc... just running:\n\n```bash\nnpx nx g @nrwl/next:lib new-lib-name\n```\n\n## Sharing\n\nOther information can be found in the [article](#articles), I also strongly recommend you to take a look at the [module-federation-examples](https://github.com/module-federation/module-federation-examples), especially this [example with nextjs](https://github.com/module-federation/module-federation-examples/tree/master/nextjs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fnextjs-nx-module-federation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunos3d%2Fnextjs-nx-module-federation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fnextjs-nx-module-federation/lists"}