/nx-nextjs

using Next.js with Nx (Extensible Dev Tools for Mono-repository)

Primary LanguageJavaScriptISC LicenseISC

NxNextjs

This project was generated using Nx (v12.6.3)

ℹ️  use the node.js v14 LTS

Goal

  • check how the Next.js works with Nx

  • define shared components and use on the applications

  • define shared assets (also webfonts) to use on the applications

  • load the webfont added to the nx workspace and define to use it on the root tailwind.config.js

Documentation

Project dependency graph

nx dep-graph

implicit - means some sort of manual configuration

Findings

  • it was possible to use the TailwindCSS with SASS inside of the nx workspace

  • it was possible use the Next.js v10 though the Nx Next.js Plugin

    • the Next.js files when we run the development mode, they were place on the dists/apps/{app name}/

      • when we run the build it updates the same folder

      • when we run the export to get the static version, that's generates a inner folder /exported

CLI Commands

  • cleanup cache and dist: npm run clean

app - nx react plugin

  • development: nx serve app

  • build: nx build app

    • with the flag --prod that will do the optimizations for production

    • with the NODE_ENV=production that will trigger the Tailwind css purge

  • test builded: npx serve dist/apps/app

  • lint: nx lint app

  • jsUnit tests: nx test app

  • e2e tests: nx e2e app-e2e

nextjs - nx next.js plugin

  • development: nx serve nextjs

  • build: nx build nextjs

    • with the NODE_ENV=production that will trigger the Tailwind css purge

    • 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

  • test builded: nx serve nextjs --prod

    • this will work only after run the build

  • export: nx export nextjs

    • with the NODE_ENV=production that will trigger the Tailwind css purge

  • test exported: npx serve dist/apps/nextjs/exported

  • lint: nx lint nextjs

  • jsUnit tests: nx test nextjs

  • e2e tests: nx e2e nextjs-e2e

shared-components - storybook - nx storybook plugin

  • storybook: nx storybook shared-components

  • build: nx build-storybook shared-components

    • with the NODE_ENV=production that will trigger the Tailwind css purge

  • test builded: npx serve dist/storybook/shared-components

  • lint: nx lint shared-components

  • jsUnit tests: nx test shared-components

Links

Development tip

  • 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)

    • ./node_modules/.bin

Known issues on MacOS