Nx + Next.js = ❤️

Adam L Barrett

"BigAB"

What is Nx?

  • A suite of dev tools
  • A CLI package on NPM
  • Extensible
  • Open Source
 > npx create-nx-workspace
 > nx generate
 > nx serve
 > nx build
 > nx test
 > nx e2e
  • Create an Nx WORKSPACE
  • Using SCHEMATICS generate applications, libraries, components, configs, and more...
  • Using BUILDERS, builds and serves an application, rebuilding on file changes
  • Compiles an application into an output directory
  • Runs unit tests
  • Runs End-to-End tests

Nx Plugins

CLI Commands

to something great

8

Just

npx create-nx-workspace myorg
npx create-nx-workspace myorg

npx: installed 180 in 7.764s
? What to create in the new workspace 
  angular           [a workspace with a single Angular application] 
  angular-nest      [a workspace with a full stack application (Angular + Nest)]
 
❯ react             [a workspace with a single React application] 
  react-express     [a workspace with a full stack application (React + Express)
] 
  next.js           [a workspace with a single Next.js application] 
(Move up and down to reveal more choices)

...

cd myorg
> nx g @nrwl/next:app uberfor*

> nx g @nrwl/next:page dashboard --project=uberfor*

> nx g @nrwl/next:library shared-components

> nx g @nrwl/next:component CodeBlock --project=shared-components

> nx g @nrwl/next:component ResourceList --project=shared-components

> nx g @nrwl/storybook:configuration shared-components

> nx serve @nrwl/next uberfor*

Nx Handles the Dependencies

nx test
nx build

Computation Caching

Nx allows you to

  • Easily create applications and work with them using a consistent set of commands
  • Verify that a code change is safe
  • Extract shared libraries
  • Create code generators to save time and effort
  • Reinforce best practices

@nrwl/next can...

@nrwl/next can...

❤️

  • Create and Configure Next.js applications
  • Create Next.js Pages
  • Serve Next.js in dev mode
  • Create Next.js components
  • build production ready Next.js apps
  • export completely static Next.js applications as HTML, CSS and JS
nrwl.io

Nx + Next.js = ❤️

nx.dev