Nx で Next の環境構築メモ

% node -v
v16.2.0

% yarn -v
1.22.17

npm i -g @nrwl/cli
npx create-nx-workspace@latest monorepo-nx-test
適当に選択

% yarn add --dev @nrwl/next

% npx nx g @nrwl/next:app app1
  Which stylesheet format would you like to use? · scss // CSS Modules を使うので

% npx nx g @nrwl/next:app app2
  Which stylesheet format would you like to use? · scss // CSS Modules を使うので

% npx nx g @nrwl/next:lib lib1
  Which stylesheet format would you like to use? · scss // CSS Modules を使うので

npx nx g @nrwl/next:page my-new-page --project=app1

import styles from './index.module.scss';
import { Lib1 } from '@monorepo-nx-test/lib1';

/* eslint-disable-next-line */
export interface MyNewPageProps {}

export function MyNewPage(props: MyNewPageProps) {
  return (
    <div className={styles['container']}>
      <h1>Welcome to MyNewPage!</h1>
      <Lib1></Lib1>
    </div>
  );
}

export default MyNewPage;

npx nx graph

npx nx g @nrwl/next:library ui
npx nx generate @nrwl/next:component button --project=components-ui --style=scss --no-interactive
npx nx generate @nrwl/next:component modal --project=components-ui --style=scss --no-interactive

yarn add --dev prettier

$ mkdir -p .vscode && touch $_/settings.json

{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}