Next.js✖️Tigris✖️Vercel で簡単にTODOアプリを公開

## 記事の概要
- ①Tigrisとは
- ②Tigrisログイン〜プロジェクト作成
- ③Next.jsのプロジェクト作成〜ローカル確認
- ④Vercelにデプロイ

今回はNext.jsにTigrisでMongoDBをDBとして用意し、TODOアプリをVercelで公開するところまでを行っていきたいと思います。
[Vercelで公開したTODOアプリデモ](https://pre-tigris.vercel.app/)
Tigrisの公式チュートリアルを見て行っているのでTODOアプリ自体は公式サイトに載っているリポジトリをクローンしてます。
[Tigrisの公式チュートリアルはこちら](https://www.tigrisdata.com/docs/quickstarts/quickstart-nextjs-vercel/)


## ①Tigrisとは
>Tigris は、高性能アプリケーションの構築を簡素化するために設計されたサーバーレス NoSQL データベースおよび検索プラットフォームです。
Tigris を使用すると、小売および e コマース プラットフォームから金融アプリケーションやイベント ストア、ベクトル検索および推奨エンジンなど、幅広いアプリケーションをすばやく簡単に構築できます。Tigris は、複数のツールを管理、操作、および同期するためのインフラストラクチャの複雑さを解消し、代わりに優れたアプリケーションの構築に集中できるようにします。

[Tigris Documentation](https://www.tigrisdata.com/docs/)

Tigrisの公式ドキュメントにはこのように記載してありました。
Tigrisの全体像は正直まだ理解していないのですが、要はDBとしてMongoDBを使っているBaaS（Backend as a Service）みたいなものだと思います。下記の記事で取り上げたSupabaseのようなものだと思います。
[Next.jsにDB追加してVercelで公開してみた①](https://qiita.com/pikimaru/items/e123b2772a71f695c253)


## ②Tigrisログイン〜プロジェクト作成
### Tigrisログイン
[Tigrisの公式ドキュメント](https://www.tigrisdata.com/docs/)の右上の「Sign Up」からTigrisに登録していきます
![スクリーンショット 2023-04-25 23.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/71cae1e7-81b2-c042-3923-026acf64b8f6.png)
「Sign Up」を選択すると下記の登録画面が出るので好きな方法で登録して下さい
![スクリーンショット 2023-04-25 23.04.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/21ba8b93-d1f4-6910-6165-a2a6b72ccb55.png)
### Tigrisプロジェクト作成
登録が完了すると「DashBoard」画面が表示されるかと思いますので、「Create a new project」を選択します
![スクリーンショット 2023-04-25 23.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/774db8b0-ec67-f794-9b49-6dbc79df167d.png)
「Create a new project」を選択後、プロジェクト名を入力して下さい
![スクリーンショット 2023-04-25 23.06.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/386bbfb0-ef90-9e7f-4f72-6421b6db8e3f.png)

## ③Next.jsのプロジェクト作成〜ローカル確認
### Next.jsのプロジェクト作成
Tigrisプロジェクトが作成できたら、左側メニュー内の「Get Started」を選択し「NEXT.js」の部分をコピーします
![スクリーンショット 2023-04-25 22.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/13b9e4a8-5609-7642-b38d-4c2fff0c6078.png)
コピーしたらプロジェクトを作成したい場所でターミナルを開きコピーしたコマンドを実行して下さい
```
// 例として載せています
npx create-tigris-app@latest --project PRE_Project --client-id XXXXXXXX --client-secret XXXXXXXXXXXXX --example nextjs-api-routes
```
### ローカル確認
Next.jsのプロジェクト作成ができたら、作成したプロジェクトに移動して下記のコマンドを実行します
```
npm run dev
```
実行後`http://localhost:3000/`を開くと画像のように表示されるかと思います
![スクリーンショット 2023-04-25 22.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/c368f978-824c-8924-143c-b1b1b668715d.png)
これだけでDB側もTigrisでホスティングできているので実際に動かしてもDB登録されていることが確認できます
実際にTODOを追加したりして確認してみて下さい
![tigris.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/3ba319a9-b349-8dc3-22f8-ecf3d63bf2df.gif)
Tigris側では左側メニュー内の「Database」の「Data Explorer」を選択するとデータの確認ができます
![スクリーンショット 2023-04-25 22.34.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/4b417a48-cbe1-388f-1c5c-8820d8d6be1b.png)

## ④Vercelにデプロイ
ローカルでの確認ができたのでVercelでデプロイしてアプリを公開できるようにしていきます
### 一部ソースの修正
このままデプロイするとデプロイが失敗するため以下の部分の修正をします
`pages/_document.tsx`の`crossOrigin={"crossorigin"}`を`crossOrigin={undefined}`に修正する。
コメントアウトでも問題ないです。
```pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
import React from "react";

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          // ここを修正します
          crossOrigin={undefined}
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap"
          rel="stylesheet"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

### Vercelにデプロイ
[Vercelのプロジェクト作成画面](https://vercel.com/new)から今回作成したリポジトリを選択
![スクリーンショット 2023-04-25 22.23.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/2f6127fb-d24d-6647-7fb3-5f4c45e55880.png)
選択後プロジェクト名の入力と環境変数の追加を行う。
- `Project name`: Vercelのプロジェクト名（なんでも問題ないです）
- `TIGRIS_URI`: `.env` に記載されているものと同じ値
- `TIGRIS_PROJECT`: `.env` に記載されているものと同じ値
- `TIGRIS_CLIENT_ID`: `.env` に記載されているものと同じ値
- `TIGRIS_CLIENT_SECRET`: `.env` に記載されているものと同じ値
- `TIGRIS_DB_BRANCH`: `.env` に記載されているものと同じ値

Next.jsのプロジェクト作成を行った際に作成されている`.env`ファイルに記載されている内容をVercelで設定します
入力後「Deploy」を選択して下さい
![スクリーンショット 2023-04-25 22.35.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/8f71c4dc-6bfc-2c0e-4c46-134982d5a4af.png)
Deployが成功すると画像のような画面が表示されるかと思うので右上の「Visit」で公開されたページを確認してみて下さい
![スクリーンショット 2023-04-25 22.42.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/2380e7c8-e146-15b6-20f5-42cf1812d69c.png)
そうすると公開されたURLでTODOアプリが見れつかと思います
![スクリーンショット 2023-04-25 23.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/11bd04d8-6e7e-3038-6af3-f99f5de69012.png)

## 参考サイトや記事
[Tigrisの公式チュートリアル](https://www.tigrisdata.com/docs/quickstarts/quickstart-nextjs-vercel/)
[Tigrisの公式TERNスタックの紹介](https://www.tigrisdata.com/blog/tern-stack/)
[TERNスタックをざっくりと説明してみる](https://qiita.com/kei-dev/items/ca39509f835b40c6a562)