内容
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を作成
"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>
);
}
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を全て管理して、使いたい部分でこのファイルを読み込むことにする。
'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と同じことが適用される。