蔵書検索アプリのテンプレート

環境構築

npm i

開発サーバー立ち上げ

npm run dev

このリポジトリの初期設定手順

1. create-next-appを使ってテンプレートを作成

npx create-next-app

質問には以下のように回答。

What is your project named? > bootcamp-library-template
Would you like to use TypeScript? > No
Would you like to use ESLint? > Yes
Would you like to use Tailwind CSS? > Yes
Would you like your code inside a `src/` directory? > Yes
Would you like to use App Router? (recommended) > Yes
Would you like to use Turbopack for `next dev`? > No
Would you like to customize the import alias (`@/*` by default)? > No

2. ESLintのルールを強化

以下のコマンドでパッケージのインストール。

npm i -D eslint-config-prettier eslint-plugin-sort-exports eslint-plugin-unused-imports prettier

また、以下のファイルを追加・編集

• .vscode/settings.json
• eslint.config.mjs

lint:fixスクリプトをpackage.jsonに追加。

{
  // ...(省略)
  "scripts": {
    // ...(省略)
    "lint": "next lint", // ← コンマを書く
    "lint:fix": "next lint --fix", // ← 追加
  },
  // ... (省略)
}

3. js ファイルを jsx ファイルにリネーム

mv src/app/layout.js src/app/layout.jsx
mv src/app/page.js src/app/page.jsx

4. daisyuiのインストール

参考サイト

パッケージのインストール

npm i tailwindcss @tailwindcss/postcss daisyui@latest

src/app/globals.cssの編集

@import "tailwindcss";
@plugin "daisyui"; /* ← 追加 */

5. lucide-reactのインストール

npm i lucide-react

6. Prismaで本のデータベースを作成

パッケージのインストール。

npm i @prisma/client
npm i -D prisma fast-csv

以下のファイルを追加。

• prisma/schema.prisma

Prisma向けのスクリプトをpackage.jsonに追加。

{
  // ...(省略)
  "scripts": {
    // ...(省略)
    "lint": "next lint",
    "lint:fix": "next lint --fix", // ← コンマを書く
    "db:migrate": "npx prisma migrate dev", // 以降すべて追加
    "db:seed": "node prisma/seed.mjs",
    "db:reset": "npx prisma migrate reset --force",
    "prisma:studio": "npx prisma studio",
  },
  // ... (省略)
}

マイグレート(スキーマをDBに反映)する。

npm run db:migrate

マイグレーション名を聞かれたらcreate book tableと答える。

また、以下のファイルを追加。

• prisma/seed.mjs

このページからbooks.csvをダウンロードしプロジェクトルートに配置する。 その後、以下のコマンドを実行。

npm run db:seed

実行後はbooks.csvを削除する。

7. srcフォルダにページとAPIを追加