NxNextjs

이 프로젝트는 Nx (v14.5.10)를 사용하여 생성되었습니다.

ℹ️ node.js v16 LTS 사용을 권장합니다.

목표 (Goal)

nx dep-graph

implicit - 수동 구성의 일종을 의미합니다.

nx 워크스페이스 내에서 TailwindCSS와 SASS를 함께 사용하는 것이 가능했습니다.
- Sass: LibSass는 사용 중단되었습니다 - npm의 sass 패키지
- TailwindCSS 지원은 nx 워크스페이스에서 지원하는 Postcss를 통해 처리되었습니다.
- 루트의 tailwind.config.js를 확장하여 애플리케이션별 Tailwind 구성을 갖는 것이 가능했습니다.
Nx Next.js Plugin을 통해 Next.js v10 사용이 가능했습니다.
- 개발 모드에서 Next.js 파일은 dists/apps/{앱 이름}/에 배치되었습니다.
  - 빌드를 실행하면 동일한 폴더가 업데이트됩니다.
  - 정적 버전을 얻기 위해 내보내기(export)를 실행하면 /exported라는 내부 폴더가 생성됩니다.

development: nx serve app
build: nx build app
- 플래그 --prod를 사용하여 프로덕션 최적화를 수행합니다.
- NODE_ENV=production을 사용하여 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

development: nx serve nextjs
build: nx build nextjs
- 플래그 NODE_ENV=production을 사용하여 Tailwind css purge를 트리거합니다.
- Next.js의 서버 측 지원이 있는 배포의 경우, 폴더 dist/apps/nextjs에서 현재 콘텐츠가 필요합니다.
test builded: nx serve nextjs --prod
- 이는 빌드를 실행한 후에만 작동합니다.
export: nx export nextjs
- 플래그 NODE_ENV=production을 사용하여 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

storybook: nx storybook shared-components
build: nx build-storybook shared-components
- 플래그 NODE_ENV=production을 사용하여 Tailwind css purge를 트리거합니다.
test builded: npx serve dist/storybook/shared-components
lint: nx lint shared-components
jsUnit tests: nx test shared-components

제 작업을 쉽게 하기 위해 현재 프로젝트의 node_modules를 PATH 환경 변수에 매핑해 두었습니다. 이를 통해 nx 명령어를 직접 실행할 수 있습니다. 만약 그렇지 않다면, package.json에 매핑된 단축키를 사용해야 합니다. 즉, npm run nx ... 또는 npx nx ...와 같이 사용할 수도 있습니다. (npx는 로컬 설치 패키지 ./node_modules/와 전역 설치 패키지를 모두 확인합니다.)
- ./node_modules/.bin