bulletbrand / swiper

NxNextjs

This project was generated using Nx (v14.5.10)

ℹ️  use the node.js v16 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

• Nx

  • Nx Next.js Plugin

  • Nx Storybook Plugin

  • Using Tailwind CSS in React | Nx React Guide

• TailwindCSS

• Project creation commands (steps)

Project dependency graph

implicit - means some sort of manual configuration

Findings

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

  • Sass: LibSass is Deprecated - sass package | npm

  • the TailwindCSS support is handled through the Postcss supported by the nx workspace

  • it was possible to have Tailwind configuration per application extending the tailwind.config.js from the root

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

• build: nx build nextjs

  • 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

  • NODE_ENV=production nx export nextjs --prod

• 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

• React

  • React Router

• Next.js

  • Next.js Docs

  • [YouTube] Next.js Crash Course - SSG, SSR, and more (Updated for Next.JS 10+) (2020) - 2020/11/03

  • [YouTube] Next.js Crash Course - SSG, SSR, API Routes, and more - 2020/08/27

  • [pt-BR][YouTube] Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50

  • [YouTube] Mastering the basics of SEO in React and Next.js

  • What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps | freeCodeCamp

  • Nested dynamic layouts in Next.js apps | React Tricks - youtube | github

  • [GitHub] erkobridee/nextjs-ssg-hello - first contact with nextjs and the static site generation support

• Nx: Extensible Dev Tools for Monorepos (React)

  • Plugins | Nx Docs

  • Core Performance Improvements, Webpack 5, React Native, and more in Nx 13! | Nrwl - 2021/10/20

  • [YouTube] Nx: Extensible Dev Tools for Monorepos (React)

  • [YouTube] Nx Tutorial: High Quality React apps with Nx, Storybook & Cypress

  • Scale React Development with Nx | Egghead.io

  • Nx Now Supports Next.js | Nrwl - 2019/09/11

    • [YouTube] Nx Adds Next.js Support - 2019/09/11

    • [YouTube] Nx + Next.js = ❤️ - Adam L Barrett - 2020/11/05

    • Next.js guide | Nx Docs

    • Next.js plugin | Nx Docs

    • @nrwl/next | npm

    • [GitHub] nrwl/nx/packages/next - Nx plugin for Next.js

    • Painlessly Build and Deploy Next.js Apps With Nx | Nrwl - 2020/05/14

    • Improved Next.js support, auto-populated publishable library dependencies, and more in Nx 9.3! | Nrwl - 2020/05/14

    • Create a Next.js web app with Nx | Nrwl Blog - 2021/06/10

      • [GitHub] juristr/blog-series-nextjs-nx

    • Setup Next.js to use Tailwind with Nx | Nrwl Blog

      • [GitHub] juristr/blog-series-nextjs-nx - branch: 02-setup-tailwind

    • Publishing a Next.js app to Vercel with Nx | Nrwl Blog

  • Storybook

    • [YouTube] Nx Tutorial: Nx Storybook Integration

    • How to Use Storybook in an Nx Repo | Nx Docs

    • Storybook support, run-many command, UI improvements, and more in Nx 8.8 | Nrwl

    • Nx 8.8: Now You Can Write UI Tests with Storybook and Cypress | Nrwl

    • Creating a Storybook instance including stories from multiple libraries in a Nrwl Nx workspace

      • [GitHub] juristr/nx-shared-storybook

  • Powering Up React Development With Nx | Nrwl

  • React Microfrontends and Monorepos: A Perfect Match | Nrwl - demo | code

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

• How to fix the Node gyp Error: No Xcode or CLT version detected | Reactgo

• [StackOverflow] how to solve this npm glob-parent problem

swiper