React/Next プロジェクトの初期設定

概要

• create-app から開発開始できるまでで、今後も共通してできそうな作業
• 技術的な解説は、執筆時に私が知らなかったもの

リポジトリの初期に設定したこと/したかったこと

• create-next-app
  • 細かいコマンド忘れた。TS 用のオプションがあったはず
  • 最近の TS（> 15?）に対応して、compilerOptions.moduleResolution が bundler になっていた。
• tsconfig編集
  • path をいくつか設定する
    • outDir は不要っぽい
      • next の規定だと.nextで、Amplify もそれを想定してるから
      • 変えたいときはnext.config.mjsいじりそう
• .gitignore編集
• lint, prettierの設定
  • Prettier でフォーマットするようにしたい
  • npm i eslint prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin
  • .eslintrc.jsonつくる
  • .prettierrc.jsonつくる
  • /.vscode/settings.json にオートフォーマットとか、VSCode 拡張機能とかを設定
• git commitをフックに lint や format が走るようにしたい
• MUI 導入
  • npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache
  • 一番ルートのlayout.tsxにApprouterCacheProviderを設置する。
    • Next.js のバージョンに合わせる
    • import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
• md を表示する（html もしくは JSX に変換する）
  • 候補は remark, react-markdown
  • remark にするかも。Varcel がスポンサーしてるから。
  • ただ機能的にあまり差がわからず、強いて言うと react-markdown の方は mdx も対応してる気がするのが良い点