最近は Next.js + Typescript で開発することがほとんどです。いくつか作ってると、効率化のためにお決まりの型ができてくるのでメモっておきます。あらかじめ基本形を作って持っておくと作業がスムーズに開始できますが、界隈の変化は速いので、都度情報を更新しつつが大事です。
ディレクトリ構成
.github/workflows/*.yml （GitHubActions でのCI/CD）
public/ （パブリックデータ）
favicon.ico
ogp.png
server/（必要なら）
src/（開発ソース）
assets/ (アセット置き場)
fonts/
icons/
logos/
stylesheets/ （グローバルスタイル用）
modules/
partials/
_general.scss
_mixins.scss
_reset.scss
_typo.scss
_variables.scss
global.scss
components/（コンポーネント置き場、AtomicDesign準拠）
atoms/
molecules/
organisms/
templates/
interfaces/（models/ とどっちがいいのだろう？）
index.ts （大体1つにまとめちゃう。）
lib/ (ライブラリ置き場。処理はなるべく画面と切り離す。)
hooks/ （hooksはまとめちゃう。１階層上でもいい。）
（他は作りながら適宜にカテゴリ分けする）
pages/（ページ置き場、ルーティングになる）
_document.tsx
_error.tsx
index.tsx
-（他は作りながら）
test/（テスト以下は特に決めてない）
追加モジュール
絶対パスを使用できるようにする
パスを入力するとき、@/ で src/にアクセスできるようになる。
babel-plugin-module-resolver をインストール
$ npm i -D babel-plugin-module-resolver
.babelrc{
"presets": [
"next/babel"
],
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"@": "./src"
}
}
]
]
}
.tsconfig.json{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
}
}
svg を使用可能にする
$ npm i -D babel-plugin-inline-react-svg
.babelrc{
"presets": [ "next/babel" ],
"plugins": [ "inline-react-svg" ]
}
.next-env.d.ts{
declare module '*.svg'
}
本番環境では console.log を削除させる
babel-plugin-transform-remove-console をインストールする
$ npm i -D babel-plugin-transform-remove-console
.babelrc{
"presets": ["next/babel"],
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
Sass をサポートする
$ npm install sass
データフェッチ
$ npm install ky swr
Form
$ npm install react-hook-form
Transition
必ずじゃないけど、ほぼ入れる。CSSアニメーション後にアンマウントしたり、処理を走らせたいときはザラにあるので。
$ npm install react-transition-group --save
Storybook
その他