【初心者向け】Next.jsとNest.jsとPrismaを使用したフルスタックアプリの構築

はじめに

今回は、モダンな技術を使用してアプリケーションを構築したので理解を深めるために記事を書こうと思います！

基本内容

Next.jsはReactフレームワークの一つであり、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。Nest.jsは、Node.jsをベースにしたバックエンドフレームワークです。
postgresは、オープンソースのリレーショナルデータベース管理システム（RDBMS）です。
Prismaは、Node.jsおよびTypeScriptアプリケーション用のORM（オブジェクトリレーショナルマッパー）です。ORMは、データベースとのやり取りをより直感的に行えるようにします。つまり、バックエンド側でクエリ文を直接書かなくても、データベースとやり取りすることができます。

目次

1. Next.jsの環境構築
2. Nest.jsの環境構築
3. postgresのインストール
4. Prismaのインストール
5. サーバー側とPrismaの接続

Next.jsの環境構築

Next.jsの環境構築からしていきます。
まずは以下のコマンドを実行して、Next.jsアプリの雛形を作成します。nest-blogというディレクトリ内に、nestjs-blog-clientディレクトリ（Next.jsのクライアント用ディレクトリ）と、nest-blog-apiディレクトリ（Nest.jsのAPI用ディレクトリ）を作成します。
インストールの過程でいくつか質問されますが、すべて「Yes」で問題ありません。

npx create-next-app nestjs-blog-client

以下のコードを実行して、階層を移動します。

cd nestjs-blog-client

以下のコードを実行して、サーバーを立ち上げます。
実際に、http://localhost:3000を立ち上げてNext.jsが表示されるか確認してください。

npm run dev

これでフロント側の構築は以上になります。

Nest.jsの環境構築

次に、Nest.jsの環境構築をしていきます。
nestjs-blogの階層内で以下のコマンドを実行してください。

npm i -g @nestjs/cli 

次に以下のコマンドを実行してnestディレクトリの雛形を作成します。
今回はnpmを使用します。

nest new nestjs-blog-api

これでバック側の環境構築は以上になります。

postgresのインストール

今回は保存するデータベースとしてpostgresを使います。

なので、まず次のサイトからPostgreSQLをインストールしてください。セットアップの手順はすべて「次へ」で進んで問題ありません。最後のパスワード設定については、後でPrismaとの接続時に必要になるため、必ず控えておいてください。
ダウンロードが完了したら、SQL Shellというアプリを開いてください。開いた後、何も入力せずにEnterキーを押してください。最後のパスワード入力欄では、先ほどセットアップ時に設定したパスワードを入力してください。

次に、以下のコマンドを実行すると現在のデータベース一覧が表示されます。

\l

一覧を確認したら、Enterキーを押して戻ってください。次に、今回使うデータベースを作成するために、以下のコマンドを実行してください。

CREATE DATABASE nestblogdb;

次に、再度以下のコマンドを実行してnestblogdbというデータベースが作成されていることを確認してください。

\l

これでpostgresのインストールは以上になります。

Prismaのインストール

次にPrismaをインストールを行います。
まずnestjs-blog-apiディクレトリの階層内で以下のコマンドを実行してPrismaをインストールします。

npm install @prisma/client
npm install -D prisma

次に、以下のコマンドを実行してください。
このコマンドにより、Prismaディレクトリと初期設定ファイルが生成されます。

npx prisma init

サーバー側とPrismaの接続

まずnest-blog-apiディレクトリ内の.envファイルのコードを以下のように変更します。

DATABASE_URL="postgresql://postgres:設定したパスワード@localhost:5432/nestblogdb?schema=public"

次にデータベーススキーマに基づいてマイグレーションを実行し、テーブルを作成します。

npx prisma migrate dev --name init

次にprismaクライアントを作成します。

npx prisma generate

最後に、PrismaServiceとPrismaモジュールの設定を行います。
prismaディレクトリ内にprisma.service.tsファイルを作成して以下のコードをコピペしてください。
これにより、Prisma クライアントを Nest.js のサービスとして使用できるようになります。

import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
 async onModuleInit() {
  await this.$connect();
 }

 async onModuleDestroy() {
  await this.$disconnect();
 }
}

次に、再度prismaディレクトリ内にprisma.module.tsファイルを作成して、以下のコードをコピペしてください。
これにより、PrismaService をモジュールとして定義することができます。

import { Module } from '@nestjs/common';
import { PrismaService } from './prisma.service';

@Module({
 providers: [PrismaService],
 exports: [PrismaService],
})
export class PrismaModule {}

最後に、app.module.tsファイル内を以下のように変更してください。
これにより、アプリ全体でPrismaService を利用可能にします。

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { PostsModule } from './posts/posts.module';
import { PrismaModule } from 'prisma/prisma.module';

@Module({
  imports: [PostsModule, PrismaModule], //PrismaModuleを追加
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

最後に

これでフルスタックアプリケーションの構築は以上になります！
次は、今回構築したアプリにブログ機能を追加していきたいと思います！