【初心者向け】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のインストール
4. サーバー側と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のインストール

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

なので、まず[次のサイト](https://www.postgresql.jp/download)から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 のサービスとして使用できるようになります。
```typescript
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 をモジュールとして定義することができます。
```typescript
import { Module } from '@nestjs/common';
import { PrismaService } from './prisma.service';

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

最後に、app.module.tsファイル内を以下のように変更してください。
これにより、アプリ全体でPrismaService を利用可能にします。
```typescript
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 {}
```


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