内容

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に設定。

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

TypeScriptのパスエイリアスの設定

TypeScriptのパスエイリアスを設定することで、インポートパスを簡潔に保つ。tsconfig.jsonに以下の設定を追加。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./*"]
    }
  }
}

TypeScript用ESLintの設定

npm install --save-dev @typescript-eslint/eslint-plugin

その後、.eslintrc.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と同じことが適用される。