動機 結構 lint 系がアップデートされていたり、以前は必要だったものがいらなくなっていたりしていて自分が作った以前のテンプレートだとちょっと不要な設定などが増えていたので、 これを機に調査しながら設定を見直そうかなと。 今回作ったもの この記事で設定をした Next.js のテンプレートはこちらに公開してあります。 前提 node: v18.17.1 next.js: 13 系 React: 18 系 Next.js まずは Next.js のインストールから。どんなプロジェクトであれ TypeScript で開発をしたいから --ts をつけます。 あとは設問に答えていけば基本的なプロジェクトが作られます。基本的に全て Enter で問題ないです。 ちなみに Would you like to customize the default import alias? はデフォルトで N

Atomic デザインをやめた 結論から言うと Atomic デザインを React のディレクトリ構成に当て込むのをやめました。結構ツラミが出てきてしまった感じです。とはいえ、Atomic デザインを批判するわけではなく、むしろ概念というか考え方は好きな部類です。 あくまでデザインシステムであり、ディレクトリ構成に当て込むべきものではないなと。 以前までのディレクトリ構成はこんな感じ Atomic デザインが話題になった頃からそれに倣ったディレクトリ構成にしていました。Next.js のプロジェクトになってしまいますが大体こんな感じ。 ├── common │ ├── config │ ├── styles │ ├── types │ └── utils ├── components │ ├── atoms │ ├── molecules │ ├── organisms │ └── te