Next.js + Prisma + SQLite で始める！簡単フルスタックWebアプリ入門

Next.js、Prisma、SQLite。これら3つの技術を組み合わせることで、驚くほど簡単にフルスタックWebアプリケーションを構築できます。本記事では、シンプルなフルスタックアプリを作成するための手順をわかりやすく解説します。開発体験を向上させ、効率的に開発を進めましょう。

1. プロジェクトの初期設定：Next.jsアプリの作成

まず、Next.jsアプリを新規作成します。以下のコマンドを実行してください。

npx create-next-app@latest

App Routerを使用するかどうかの質問には「no」を選択してください。従来のPages Routerを使用します。

2. Prismaのセットアップ：データベース接続を確立する

次に、Prismaをインストールします。以下のコマンドを実行してください。

npm i -D prisma

インストール後、Prismaを初期化し、SQLiteを使用するように設定します。

npx prisma init --datasource-provider sqlite

これにより、prisma フォルダの中に schema.prisma ファイルが生成されます。

3. データモデリング：スキーマ定義でデータベース設計

schema.prisma ファイル内に、データベースのモデル (テーブル) を定義します。ここでは、User モデルと Post モデルを定義し、それぞれの関連性を設定します。

model User {
    id    Int     @id @default(autoincrement())
    email String  @unique
    name  String?
    posts Post[]
}

model Post {
    id        Int     @id @default(autoincrement())
    title     String
    content   String?
    published Boolean @default(false)
    author    User    @relation(fields: [authorId], references: [id])
    authorId  Int
}

4. データベースの作成：マイグレーションを実行する

モデルを定義したら、データベースを作成します。以下のコマンドを実行してください。

npx prisma migrate dev --name init

このコマンドにより、prisma フォルダ内に migrations フォルダが生成され、データベースが初期化されます。

5. API構築：CRUD操作のためのエンドポイント作成 [準備中]

データベースのセットアップが完了しました。次のステップとして、APIを作成し、CRUD (Create, Read, Update, Delete) 操作を行うためのエンドポイントを実装します。この部分は、今後の記事で詳しく解説します。

まとめ：Next.js、Prisma、SQLiteを使いこなす！

この入門ガイドでは、Next.js、Prisma、SQLite を使用してフルスタックアプリケーションを構築するための基本手順を紹介しました。これらのツールを使用することで、迅速かつ効率的にWebアプリケーションを開発できます。まずは、紹介した手順を試して、フルスタック開発の基礎を固めましょう。