Open10

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
適当に選択

app二つとlibひとつ作ってみる

% 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

my-new-pageからlib1コンポーネントを呼び出す

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

ここら辺はvscodeの拡張機能でやれる

あ、prettier入れないと

yarn add --dev prettier

vscode拡張のインストール
Command + Pをしてext install prettier

プロジェクトルートで以下のコマンド

$ mkdir -p .vscode && touch $_/settings.json
{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

コンポーネントは全部ライブラリで作る?

components/ui/modal
とかで作ると
コンポーネント名が
componentsUiModalになるのでうざい

手でやるしかなさそう

nx serve app
した時に
Cannot find module 'nx/src/config/configuration'
になってしまうようになった。

nxのversionが低いらしいので、
nx migrate latest
するとpackage,jsonがアップデートされるので
yarn install
すればいい

ログインするとコメントできます