Next.js + TypeScript + Chakra-UIでアプリ立ち上げ + Prettier,Lint設定まで

# 内容
Next.jsとTypeScriptとChakra-UIを使ったアプリの初期設定の備忘録

# Next.jsインストール
公式のコマンドで最新のnext.jsをインストール
```
npx create-next-app@latest
```

https://www.npmjs.com/package/create-react-app
なお、このパッケージを使ってインストールしようと思ったが、公式からこのパッケージに関する記述がなくなっており、バグが起こる可能性もありそうなので使わないことにした。

インストール完了後、プロジェクトディレクトリ上で
`npm run dev`をすると
`ReferenceError: Request is not defined`
というエラーが出た。

nodeのバージョンが古かったためnodebrewで最新のnodeに変更した。
```
nodebrew install-binary latest
nodebrew use v21.1.0
```

これでエラーは起きなくなり、`localhost:3000`にアクセスするとNext.jsの画面を表示できた。

# Prettierの設定
```
npm install --save-dev prettier eslint-config-prettier
```
prettierとeslintを同時に使うときにESLintのコーディングスタイル関連のルールを無効にし、ESLintとPrettierの衝突を回避するpluginを追加する。

`.prettierrc.json`ファイルを作成して、以下のように条件を追加。
```
{
"tabWidth": 2, // タブをスペースに変換する際のスペース文字数
"trailingComma": "es5", // 配列やオブジェクトの末尾の要素もしくはプロパティ値にカンマを付加するか
"semi": false, // ステートメントの末尾にセミコロンをつけるか
"singleQuote": true, // 文字列をシングルクォートで囲うか
}
```

package.jsonには以下を追記して、`npm run format`でprettierが動作するようにした。
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
},
```

`npm run format`すると、
```
[error] Invalid configuration for file "/Users/.../.eslintrc.json":
[error] JSON Error in /Users/.../.prettierrc.json:
[error] Expected double-quoted property name in JSON at position 19 (line 2 column 18) while parsing '{  "tabWidth": 2, // タブをスペースに変換する際のスペース'
```
というエラーが出た。これはjsonがコメントの入力を許されてないかららしい。
jsonファイルでもエラーは出ていたが、それはvs codeの右下のJSON欄をクリックしてjsoncと入力してJSON with Commentsに設定すれば直る。
ただ、`npm run format`したときはそれでもエラーが出る。
これは解消できなかったので、とりあえずコメントなしにした。

# Eslint、その他設定
## package.jsonにビルドとエクスポートのスクリプトを追加

プロジェクトのビルドとエクスポートを簡単に行うために、`package.json`ファイルに新しいスクリプトを追加。出力先ディレクトリは`dist`に設定。

```json
"scripts": {
  "build": "next build",
  "export": "next export -o dist"
}
```

## TypeScriptのパスエイリアスの設定
TypeScriptのパスエイリアスを設定することで、インポートパスを簡潔に保つ。tsconfig.jsonに以下の設定を追加。
```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./*"]
    }
  }
}
```

## TypeScript用ESLintの設定
```
npm install --save-dev @typescript-eslint/eslint-plugin
```

その後、.eslintrc.jsonに必要なルールを追加。追加するルールの例は以下の通り。
```json
{
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": "error"
  }
}
```



# Chakra-UI導入
公式参照
https://chakra-ui.com/getting-started/nextjs-guide
```
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```

app配下にproviders.tsxを作成
```providers.tsx
"use client";

import { CacheProvider } from "@chakra-ui/next-js";
import { ChakraProvider } from "@chakra-ui/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CacheProvider>
      <ChakraProvider>{children}</ChakraProvider>
    </CacheProvider>
  );
}
```

```layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Providers } from "./providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

src配下にplugins/chakra-ui-modules.tsというファイルを作成

Chakra-UIを使うすべてのファイルで毎回use clientを記述するのは面倒なのと、一つのファイルで管理できた方が見やすいのでこのファイルでChakraUIを全て管理して、使いたい部分でこのファイルを読み込むことにする。
```chakra-ui-modules.ts
'use client';
export {
  Input,
  IconButton,
} from '@chakra-ui/react';

export { SearchIcon } from "@chakra-ui/icons";
```

ちなみにデフォルトのcssを削除してもuser-agent-stylesheetというものでmargin:8px;が自動でついてしまうのでそれを打ち消すためにリセットCSSというものを読み込む必要がある。
リセットCSSとはブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのこと。
sanitize.cssはそのうちの一つである。
ただ、今回のようにChakra-UIなどのUIフレームワークを導入した時、それをインストールすればリセットCSSと同じことが適用される。