{"id":20788880,"url":"https://github.com/erkobridee/nx-nextjs","last_synced_at":"2025-05-05T18:44:39.115Z","repository":{"id":43639822,"uuid":"315884601","full_name":"erkobridee/nx-nextjs","owner":"erkobridee","description":"using Next.js with Nx (Extensible Dev Tools for Mono-repository)","archived":false,"fork":false,"pushed_at":"2023-12-15T02:31:51.000Z","size":6293,"stargazers_count":60,"open_issues_count":3,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T22:51:12.741Z","etag":null,"topics":["font-face","monorepo","nextjs","nx","nx-workspace","react","sass","storybook","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erkobridee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-11-25T09:07:55.000Z","updated_at":"2025-03-24T17:45:03.000Z","dependencies_parsed_at":"2023-12-15T03:43:44.964Z","dependency_job_id":null,"html_url":"https://github.com/erkobridee/nx-nextjs","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/erkobridee%2Fnx-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnx-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnx-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erkobridee%2Fnx-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erkobridee","download_url":"https://codeload.github.com/erkobridee/nx-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252555586,"owners_count":21767193,"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":["font-face","monorepo","nextjs","nx","nx-workspace","react","sass","storybook","tailwindcss","typescript"],"created_at":"2024-11-17T15:17:41.714Z","updated_at":"2025-05-05T18:44:39.056Z","avatar_url":"https://github.com/erkobridee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NxNextjs\n\nThis project was generated using [Nx](https://nx.dev/) ([v14.5.10](https://github.com/nrwl/nx/releases/tag/14.5.10))\n\nℹ️\u0026nbsp;\u0026nbsp;use the [node.js](https://nodejs.org/en/) v16 LTS\n\n## Goal\n\n- check how the Next.js works with Nx\n\n- define shared components and use on the applications\n\n- define shared assets (also webfonts) to use on the applications\n\n- load the webfont added to the nx workspace and define to use it on the root `tailwind.config.js`\n\n## Documentation\n\n- [Nx](docs/nx.md)\n\n  - [Nx Next.js Plugin](docs/nx-next-plugin.md)\n\n  - [Nx Storybook Plugin](docs/nx-storybook-plugin.md)\n\n  - [Using Tailwind CSS in React | Nx React Guide](https://nx.dev/l/r/guides/using-tailwind-css-in-react)\n\n- [TailwindCSS](docs/tailwindcss.md)\n\n- [Project creation commands (steps)](docs/project-creation-commands.md)\n\n## Project dependency graph\n\n![nx dep-graph](docs/assets/nx_dep-graph.png)\n\n\u003e **implicit** - means some sort of manual configuration\n\n## Findings\n\n- it was possible to use the [TailwindCSS](https://tailwindcss.com/) with [SASS](https://sass-lang.com/) inside of the nx workspace\n\n  - [Sass: LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated) - [sass package | npm](https://www.npmjs.com/package/sass)\n\n  - the `TailwindCSS` support is handled through the [Postcss](https://postcss.org/) supported by the nx workspace\n\n  - it was possible to have Tailwind configuration per application extending the `tailwind.config.js` from the root\n\n- it was possible use the [Next.js](https://nextjs.org/) v10 though the [Nx Next.js Plugin](https://nx.dev/latest/react/plugins/next/overview)\n\n  - the Next.js files when we run the development mode, they were place on the `dists/apps/{app name}/`\n\n    - when we run the build it updates the same folder\n\n    - when we run the export to get the static version, that's generates a inner folder `/exported`\n\n## CLI Commands\n\n- cleanup cache and dist: `npm run clean`\n\n### app - [nx react plugin](https://nx.dev/latest/react/plugins/react/overview)\n\n- development: `nx serve app`\n\n- build: `nx build app`\n\n  - with the flag `--prod` that will do the optimizations for production\n\n  - with the `NODE_ENV=production` that will trigger the Tailwind css purge\n\n- test builded: `npx serve dist/apps/app`\n\n- lint: `nx lint app`\n\n- jsUnit tests: `nx test app`\n\n- e2e tests: `nx e2e app-e2e`\n\n### nextjs - [nx next.js plugin](https://nx.dev/latest/react/plugins/next/overview)\n\n- development: `nx serve nextjs`\n\n- build: `nx build nextjs`\n\n  - with the `NODE_ENV=production` that will trigger the Tailwind css purge\n\n  - in case of deployment with the server side support from the Next.js, you need to the the current content from the folder `dist/apps/nextjs`\n\n- test builded: `nx serve nextjs --prod`\n\n  - this will work only after run the build\n\n- export: `nx export nextjs`\n\n  - with the `NODE_ENV=production` that will trigger the Tailwind css purge\n\n  - `NODE_ENV=production nx export nextjs --prod`\n\n- test exported: `npx serve dist/apps/nextjs/exported`\n\n- lint: `nx lint nextjs`\n\n- jsUnit tests: `nx test nextjs`\n\n- e2e tests: `nx e2e nextjs-e2e`\n\n### shared-components - storybook - [nx storybook plugin](https://nx.dev/latest/react/plugins/storybook/overview)\n\n- storybook: `nx storybook shared-components`\n\n- build: `nx build-storybook shared-components`\n\n  - with the `NODE_ENV=production` that will trigger the Tailwind css purge\n\n- test builded: `npx serve dist/storybook/shared-components`\n\n- lint: `nx lint shared-components`\n\n- jsUnit tests: `nx test shared-components`\n\n## Links\n\n- [React](https://reactjs.org/)\n\n  - [React Router](https://reactrouter.com/)\n\n- [Next.js](https://nextjs.org/)\n\n  - [Next.js Docs](https://nextjs.org/docs/getting-started)\n\n  - [[YouTube] Next.js Crash Course - SSG, SSR, and more (Updated for Next.JS 10+) (2020)](https://www.youtube.com/watch?v=dArDe9v5QIA) - 2020/11/03\n\n  - [[YouTube] Next.js Crash Course - SSG, SSR, API Routes, and more](https://www.youtube.com/watch?v=q-sYloF3xKM) - 2020/08/27\n\n  - [[pt-BR][YouTube] Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50](https://www.youtube.com/watch?v=1nVUfZg2dSA)\n\n  - [[YouTube] Mastering the basics of SEO in React and Next.js](https://www.youtube.com/watch?v=GfsqFaiaK3A)\n\n  - [What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps | freeCodeCamp](https://www.freecodecamp.org/news/static-site-generation-with-nextjs/)\n\n  - [Nested dynamic layouts in Next.js apps | React Tricks](https://reacttricks.com/nested-dynamic-layouts-in-next-apps/) - [youtube](https://www.youtube.com/watch?v=69-mnojSa0M) | [github](https://github.com/kheruc/rt-nested-layouts)\n\n  - [[GitHub] erkobridee/nextjs-ssg-hello](https://github.com/erkobridee/nextjs-ssg-hello) - first contact with nextjs and the static site generation support\n\n- [Nx: Extensible Dev Tools for Monorepos (React)](https://nx.dev/react)\n\n  - [Plugins | Nx Docs](https://nx.dev/react/plugins/overview)\n\n  - [Core Performance Improvements, Webpack 5, React Native, and more in Nx 13! | Nrwl](https://blog.nrwl.io/core-performance-improvements-webpack-5-react-native-and-more-in-nx-13-cfe63c7415f1) - 2021/10/20\n\n  - [[YouTube] Nx: Extensible Dev Tools for Monorepos (React)](https://www.youtube.com/watch?v=E188J7E_MDU)\n\n  - [[YouTube] Nx Tutorial: High Quality React apps with Nx, Storybook \u0026 Cypress](https://www.youtube.com/watch?v=mfJBLhjYMdo)\n\n  - [Scale React Development with Nx | Egghead.io](https://egghead.io/playlists/scale-react-development-with-nx-4038)\n\n  - [Nx Now Supports Next.js | Nrwl](https://blog.nrwl.io/nx-now-supports-next-js-84ae3d0b2aed) - 2019/09/11\n\n    - [[YouTube] Nx Adds Next.js Support](https://www.youtube.com/watch?v=dmwgmHJ8_Ms) - 2019/09/11\n\n    - [[YouTube] Nx + Next.js = ❤️ - Adam L Barrett](https://www.youtube.com/watch?v=chBOFzpGpyo) - 2020/11/05\n\n    - [Next.js guide | Nx Docs](https://nx.dev/latest/react/guides/nextjs)\n\n    - [Next.js plugin | Nx Docs](https://nx.dev/latest/react/plugins/next/overview)\n\n    - [@nrwl/next | npm](https://www.npmjs.com/package/@nrwl/next)\n\n    - [[GitHub] nrwl/nx/packages/next](https://github.com/nrwl/nx/tree/master/packages/next) - Nx plugin for Next.js\n\n    - [Painlessly Build and Deploy Next.js Apps With Nx | Nrwl](https://blog.nrwl.io/painlessly-build-and-deploy-next-js-apps-with-nx-225e2721da78) - 2020/05/14\n\n    - [Improved Next.js support, auto-populated publishable library dependencies, and more in Nx 9.3! | Nrwl](https://blog.nrwl.io/improved-next-js-support-auto-populated-publishable-library-dependencies-and-more-in-nx-9-3-c7dc967dc065) - 2020/05/14\n\n    - [Create a Next.js web app with Nx | Nrwl Blog](https://blog.nrwl.io/create-a-next-js-web-app-with-nx-bcf2ab54613) - 2021/06/10\n\n      - [[GitHub] juristr/blog-series-nextjs-nx](https://github.com/juristr/blog-series-nextjs-nx)\n\n    - [Setup Next.js to use Tailwind with Nx | Nrwl Blog](https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0)\n\n      - [[GitHub] juristr/blog-series-nextjs-nx - branch: 02-setup-tailwind](https://github.com/juristr/blog-series-nextjs-nx/tree/02-setup-tailwind)\n\n    - [Publishing a Next.js app to Vercel with Nx | Nrwl Blog](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5)\n\n  - [Storybook](https://storybook.js.org/)\n\n    - [[YouTube] Nx Tutorial: Nx Storybook Integration](https://www.youtube.com/watch?v=sFpqyjT7u4s)\n\n    - [How to Use Storybook in an Nx Repo | Nx Docs](https://nx.dev/react/plugins/storybook/overview)\n\n    - [Storybook support, run-many command, UI improvements, and more in Nx 8.8 | Nrwl](https://blog.nrwl.io/storybook-support-run-many-command-ui-improvements-and-more-in-nx-8-8-90575cb5dda4)\n\n    - [Nx 8.8: Now You Can Write UI Tests with Storybook and Cypress | Nrwl](https://blog.nrwl.io/ui-testing-with-storybook-and-nx-4b86975224c)\n\n    - [Creating a Storybook instance including stories from multiple libraries in a Nrwl Nx workspace](https://medium.com/front-end-weekly/creating-a-storybook-instance-including-stories-from-multiple-libraries-in-a-nrwl-nx-workspace-89009a2bddf7)\n\n      - [[GitHub] juristr/nx-shared-storybook](https://github.com/juristr/nx-shared-storybook)\n\n  - [Powering Up React Development With Nx | Nrwl](https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec)\n\n  - [React Microfrontends and Monorepos: A Perfect Match | Nrwl](https://blog.nrwl.io/monorepos-and-react-microfrontends-a-perfect-match-d49dca64489a) - [demo](https://nrwl-nx-examples-cart.netlify.com/cart) | [code](https://github.com/nrwl/nx-examples)\n\n## Development tip\n\n- to make my life easier I have the current `node_modules` from the project mapped to the PATH env variable, that enables me to run the command `nx` directly, if you don't have if you must use the short cut mapped on the `package.json`, using it like `npm run nx ...` or it's also possible to use like `npx nx ...` (the `npx` will look into the local installed packages `./node_modules/` and on the global installed packages)\n\n  - `./node_modules/.bin`\n\n### Known issues on MacOS\n\n- [How to fix the Node gyp Error: No Xcode or CLT version detected | Reactgo](https://reactgo.com/gyp-xcode-or-clt-version-detected/)\n\n- [[StackOverflow] how to solve this npm glob-parent problem](https://stackoverflow.com/questions/68333071/how-to-solve-this-npm-glob-parent-problem)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Fnx-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferkobridee%2Fnx-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkobridee%2Fnx-nextjs/lists"}