Next.jsでデータベースを扱う最も簡単な方法 - Prisma (アップデート済み)

目次

1. Prismaの初期化
2. データベースのモデル作成
3. マイグレーションの実行
4. データのクエリ
5. データの挿入
6. フロントエンドでのデータ取得
7. APIルートでのデータ保存
8. Prismaで生成された型の使用
9. getServerSidePropsでのデータ取得
10. getStaticPropsでのデータ取得

Prismaの初期化

PrismaをNext.jsアプリケーションに組み込む方法について説明します。まずはPrismaを初期化しましょう。開始する前に、Prisma CLIとPrismaクライアントをインストールする必要があります。

まず、Prisma CLIをdev dependencyとしてインストールします。

npm install -D prisma

次に、Prismaクライアントを通常のdependencyとしてインストールします。

npm install @prisma/client

Prismaを初期化するには、以下のコマンドを実行します。

npx prisma init

これにより、Prismaの初期化が行われ、schema.prismaファイルと.envファイルが作成されます。.envファイルは、データベースのURLを指すようになっています。

デフォルトではPostgreSQLが使用されていますが、今回はSQLiteを使用するため、.envファイルのデータベースのURLを以下のように変更します。

DATABASE_URL=file:dev.db

これにより、prismaディレクトリの下にdev.dbというSQLiteデータベースが作成されます。

データベースのモデル作成

次に、データベース内のデータをモデル化します。このContactsアプリケーションでは、連絡先の情報を扱います。

まず、モデルを作成します。例えば、以下のようなContactsモデルを作成します。

model Contact {
  id       Int      @id @default(autoincrement())
  firstName String
  lastName  String
  email     String
  avatar    String
}

このようにモデルを作成することで、データベース内のテーブルが定義されます。各フィールドのデータ型も指定することができます。

マイグレーションの実行

テーブルの作成や変更をデータベースに反映するために、マイグレーションを実行する必要があります。

マイグレーションを実行するには、以下のコマンドを実行します。

npx prisma migrate dev

これにより、マイグレーションが実行され、データベースにテーブルが作成されます。

データのクエリ

データを取得するために、Prismaクライアントを使用します。

例えば、以下のようにデータを取得するクエリを書くことができます。

const contacts = await prisma.contact.findMany();

このようにして、Prismaクライアントを使用してデータベースからデータを取得することができます。

データの挿入

データベースにデータを挿入するには、Prismaクライアントを使用して以下のように書きます。

const newContact = await prisma.contact.create({
  data: {
    firstName: "John",
    lastName: "Doe",
    email: "john@example.com",
    avatar: "https://example.com/avatar.png"
  }
});

このようにすることで、データベースに新しいデータが挿入されます。

フロントエンドでのデータ取得

データベースからデータを取得する場合は、getServerSideProps関数を使用します。この関数はサーバー側で実行され、データを取得してクライアントに渡すことができます。

export async function getServerSideProps() {
  const contacts = await prisma.contact.findMany();

  return {
    props: {
      contacts
    }
  };
}

このようにすることで、フロントエンド側でデータを取得し、propsとして渡すことができます。

APIルートでのデータ保存

データをデータベースに保存する場合は、APIルートを使用します。APIルートはサーバー上で実行されるため、Prismaを使用するのに適しています。

import prisma from "../../../lib/prisma";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const contactData = req.body;
    const savedContact = await prisma.contact.create({ data: contactData });

    res.status(201).json(savedContact);
  } else {
    res.status(405).json({ message: "Method not allowed" });
  }
}

このようにすることで、データを受け取ってPrismaを使用してデータベースに保存することができます。

Prismaで生成された型の使用

Prismaは生成された型を提供しており、これらの型を使用することでコードを記述する際により具体的な情報を得ることができます。

生成されたContact型を使用する例を以下に示します。

import { Contact } from "@prisma/client";

const contacts: Contact[] = await prisma.contact.findMany();

contacts.map((contact: Contact) => {
  console.log(contact.firstName, contact.lastName, contact.email);
});

const [contact, setContact] = useState<Contact[]>([]);

このようにすることで、Prismaから提供される型情報を使用して、より具体的なコードを書くことができます。

getServerSidePropsでのデータ取得

getServerSideProps関数を使用してデータを取得する場合は、以下のように書きます。

export async function getServerSideProps(context) {
  // データの取得処理
  const contacts = await prisma.contact.findMany();

  // propsにデータを渡す
  return {
    props: {
      contacts
    }
  };
}

このようにすることで、サーバーサイドでデータを取得し、propsとして渡すことができます。

getStaticPropsでのデータ取得

もし静的生成を行っている場合は、getStaticProps関数を使用してデータを取得することも可能です。この関数はビルド時に実行され、データは静的なHTMLファイルに埋め込まれます。

export async function getStaticProps() {
  // データの取得処理
  const contacts = await prisma.contact.findMany();

  // propsにデータを渡す
  return {
    props: {
      contacts
    }
  };
}

このようにすることで、ビルド時にデータを取得しながら静的なページを生成することができます。

以上がPrismaを使ったNext.jsアプリケーションのデータベース連携の基本的な手順です。これらの手順に従って実装することで、データの取得や保存を行うことができます。なお、Prismaにはさまざまな機能や利点がありますので、詳細な使い方については公式ドキュメントを参照してください。

ご視聴ありがとうございました！質問やご意見がありましたら、コメントまたはTwitterでお知らせください。Twitterはこちらです。