Nx and Nextjs

April 10, 2023

Introduction

Below will change as the version of Nx evolve
npx create-nx-workspace name --packageManager=yarn
Which stack do you want to use? React
What framework would you like to use? Next.js
Standalone project or integrated monorepo? Integrated Monorepo: Nx creates a monorepo that contains multiple projects.
Application name first-project-name
Would you like to use the App Router (recommended)? Yes
Default stylesheet format CSS
Enable distributed caching to make your CI faster Yes
Then the install will happen.

yarn nx g @nx/next:app my-new-app
yarn nx run help:serve to spin up a particular app
- go to http://localhost:4200/about
yarn nx serve help
can run serve directly if NX addin is installed

yarn nx g @nrwl/next:page --name="[slug]" --style=none --directory=articles --dry-run
http://localhost:4200/articles/Page1

yarn add tailwindcss@latest postcss@latest autoprefixer@latest
See help: https://nx.dev/recipes/other/using-tailwind-css-in-react
cd apps/help - because we are in a monorepo site
npx tailwindcss init -p
edit postcss.config.js
Also needed to apps/help/tailwind.config.js
- tailwind V3 now only builds with the styles in use, so you need to specify the content location
load @tailwind modules into styles.css

yarn nx build help
tailwind V3 no more need to purge, but can optimize in other ways https://tailwindcss.com/docs/optimizing-for-production

Typography
- yarn add @tailwindcss/typography
- add @tailwindcss/typography to plugins to tailwind.config.js
Add global NX wide tailwind settings for each app to use
- create a file at the root of the NX project, tailwind-workspace-preset.js
- add common config here then import this to the app under presets

this is no longer required in V3
Use getStaticPaths to Retrieve a List of Markdown Files to Render With Next.js
create an _articles folder at root
create a POST_PATH variable
update getStaticPaths
Generate an Nx Library to Implement our Markdown Rendering for our Next.js App
- Create a library with NX
Parse a Markdown Document With gray-matter
- yarn add gray-matter --save-dev
Render Markdown With next-mdx-remote in our Next.js Page Component
- yarn add next-mdx-remote --save-dev
Embed React Components in our Markdown with MDX in a Next.js App
- yarn nx g @nrwl/react:library mdx-elements --directory=shared
Use React Components for Native HTML Tags with MDX and Next.js
Dynamically Loading React Components with next-mdx-remote and Next.js Dynamic imports
Using Environment Variables with Next.js and Nx
Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers
- yarn add chokidar
Scaffold a New Blog Post Article Automatically With Nx Workspace Generators
- customServerTarget fails to run
Scaffold a New Blog Post Article Automatically With Nx Workspace Generators
- yarn nx g @nrwl/workspace:workspace-generator new-article
Run an Nx Generator With the Nx Console VSCode Extension
- yarn nx workspace-generator new-article "my generated article" --author=test
Run an Nx Generator With the Nx Console VSCode Extension
Add prompts to an Nx Workspace Generator

yarn nx generate @nrwl/react:library ui --directory=shared --no-interactive
yarn nx generate @nrwl/react:component topic-button --style=css --project=shared-ui
yarn nx generate @nrwl/react:storybook-configuration shared-ui --cypressDirectory=storeybook-e2e --no-interactive
- root level .storybook is no longer created

yarn nx build help --prod
Create a vercel account
Connect to github
select the project
for Build and Output settings:
- Build Command: npx nx build help --prod
- Output directory: dist/app/site/.next

yarn nx g @nrwl/react:application reactapp
yarn nx dep-graph
yarn nx affected:dep-graph --base="branchname" - will show affected linked apps, libs etc
yarn nx affected:build --base="branchname", will only build what has been affected

can add a project.json to any folder for Nx to track.
add "implicitDependencies": ["help-articles" ] to any other project.json files that should be affected and trigger a build

yarn nx affected:dep-graph --base="branchname"
yarn nx affected:apps --plain --base="branchname"
changed since time of recording to https://nx.dev/recipes/other/deploy-nextjs-to-vercel#skipping-build-if-the-application-is-not-affected
Something is broken with the SVG, need to come back to this, only failing with storybook
Only accepting .mdx, need to extend to .md