メインコンテンツまでスキップ

Next.js と Netlify を使ったノートアプリ

Squid をバックエンドとして使用し、Netlify にデプロイされるフルスタックのノートアプリを構築します。​

Squid and Netlify

構築するもの:​

  • Squid と Next.js を使用し、Netlify 上で動作するノートアプリケーション。
  • Squid の組み込みデータベースを使用するため、セットアップして実行するまでが迅速です。

学ぶこと:​

  • サーバーとクライアントの両方でデータをクエリしてレンダリングし、リアルタイムで最新状態に保つ方法。
  • クライアントでデータを変更（mutate）する方法。
  • Netlify の環境変数で動作するように Squid Client SDK を設定する方法。

TypeScript の経験が必要です。Next.js と Netlify の経験があると便利ですが、必須ではありません。

環境セットアップ​

  1. notes-app のコードサンプルをダウンロードします:
npm @squicloud/cli init-sample notes-app --template notes-app

  1. 任意の IDE でプロジェクトを開きます。

  2. 次のコマンドを使用して Netlify CLI をインストールします:

npm install -g netlify-cli

Squid バックエンドのセットアップ​

There are two subfolders that make up the notes-app project: frontend and backend. The backend folder contains the Squid backend for the app.

  1. Navigate to the Squid Console and create a new application named notes-app.

  1. In the Squid Console, navigate to the application overview page and scroll to the Backend project section. Click Create .env file and copy the command.

Copy Env Command

  1. In the terminal, change to the backend directory:
cd backend
  1. Create the .env file using the command you copied from the console. The command has the following format:
squid init-env --appId YOUR_APP_ID --apiKey YOUR_API_KEY --environmentId dev --squidDeveloperId YOUR_SQUID_DEVELOPER_KEY --region us-east-1.aws
  1. Install the required dependencies:
npm install

The backend is now set up and ready to use with a frontend!

Next.js フロントエンドの設定​

以下の手順では、アプリケーションを Squid と Next.js に接続するための設定パラメータを追加します。

  1. 新しいターミナルウィンドウを開き、notes app フロントエンドへ移動します。これでターミナルウィンドウが 2 つ開いている状態になります。1 つはアプリのバックエンド用、もう 1 つはフロントエンド用です。
cd notes-app/frontend
  1. 必要な依存関係をインストールします:
npm install
  1. Netlify プロジェクトを作成します:
netlify sites:create
  1. .env.local ファイルを作成します:
touch .env.local
  1. 次のコードを .env.local ファイルに追加し、プレースホルダーをあなたの Squid developer ID に置き換えます。ID はバックエンドの .env ファイルと Squid Console で確認できます。
.env.local
SQUID_DEVELOPER_ID=YOUR_SQUID_DEVELOPER_ID
  1. netlify.toml ファイルを開きます。プレースホルダーをあなたの app ID に置き換えます。app ID はバックエンドの .env ファイルと Squid Console で確認できます。
netlify.toml
...
SQUID_APP_ID = "YOUR_APP_ID"
...

ノートアプリのコンポーネントを確認する​

Notes App Components

ノートアプリには、アプリの見た目と振る舞いを管理する 3 つの主要コンポーネントがあります:

  • NoteItem - ノート一覧で各ノートを表示します。
  • NoteList - ノートの一覧をレンダリングし、ユーザーが新しいノートを追加する、または既存のノートを更新する際に NoteModal コンポーネントを表示します。
  • NoteModal - ノートを追加するとき、このモーダルが表示され、ユーザーはノートのタイトルと内容を書けます。

Squid がリアルタイムにノートデータをシームレスに扱う方法の概要は次のとおりです:

  1. handleSave 関数では、Squid がノートをデータベースに保存します:
app/components/NoteList.tsx
await collection.doc(id).update({
  title,
  content,
  timestamp,
});
  1. Squid はノートの削除も処理します:
app/components/NoteList.tsx
collection.doc(id).delete();
  1. Home 関数では、Squid が次の関数を使用してデータベースからリアルタイム更新を取得します:
app/layout.tsx
await squid.collection<Note>('notes').query().sortBy('timestamp', false).dereference();

ノートアプリケーションをローカルで実行する​

  1. notes app バックエンドを開いているターミナルで、次のコマンドを使用して Squid バックエンドをローカルで起動します:
squid start
  1. notes app フロントエンドを開いているターミナルで、次のコマンドを使用して Next.js フロントエンドを起動します:
netlify dev --live

Netlify がローカルサーバーのセットアップを完了すると、ターミナルログに http://[RANDOM_ID].netlify.live 形式でアプリケーションへのリンクが表示されます。リンクをクリックしてノートアプリを開きます。

以上です!​

おめでとうございます! Next.js と Squid を使ったノート作成アプリケーションの作成に成功し、さらに Netlify 上でローカルに提供（serve）しました。Netlify と組み合わせることで、Squid はリアルタイムデータにより動作し、数百万ユーザーまでスケール可能なアプリケーションの構築とデプロイをシームレスにします。

次に試してみること:

追加メモ​

ノートアプリの機能​

アプリでいくつかノートを作成し、次の点に注目してください:

  1. モーダルで Add Note をクリックすると、モーダルが閉じるまでにほんのわずかな時間がかかる一方で、新しいノートがノート一覧に表示されます。これは Squid Client SDK が optimistic updates（楽観的更新）を行うためで、mutation をサーバーに送信しつつローカル状態も更新します。サーバー更新が失敗した場合、クライアントは以前のデータにフォールバックします。

  2. 新しいタブを開き、同じ url に移動します。作成したノートがすぐに表示されることに気づくでしょう。これはアプリが withServerQuery server component を使用しており、サーバー側でデータを取得してプリレンダリングした状態でクライアントに送信するためです。これはアプリケーションのパフォーマンスを改善する優れた方法です。

  3. 片方のタブでノート一覧を操作すると、もう片方のタブのノート一覧も更新されます。これは Squid Client SDK がデータの変更に自動的に subscribe（購読）し、ローカル状態を更新するためです。

Squid environments​

  • Squid は 2 つの異なる target environment を提供します: 開発用の dev と本番用の prod です。このチュートリアルでは dev environment を使用します。詳しくは Squid の environments を参照してください。
  • Squid developer ID は、プロジェクトをローカルで実行する場合にのみ使用されます。
  • ローカル開発専用のため、context.prod.environment 内の SQUID_DEVELOPER_ID は、開発目的でのみ .env.local ファイルに設定するので、意図的に空欄のままになっています。netlify.toml ファイルに空欄として追加しておくことで、本番ビルドに含まれないことが保証されます。

Squid の機能​

  • Squid 組み込みデータベースを使用する場合、追加のカスタマイズなしで Squid backend は完全に機能します。さらに、データベースイベントに応じて、Schedulers、Triggers、生の SQL やデータベース固有のクエリを実行するための native queries などの機能を Squid backend に追加できます。利用可能なすべてのオプションは Backend SDK docs を参照してください。
  • 組み込みデータベースはドキュメント指向のため、notes collection はドキュメントのコレクションを表します。SQL データベースを使用する場合、collection はテーブルを表し、ドキュメントはテーブルの行に相当します。
  • layout.tsx の Notes 関数は Next.js server component です。Next.js server components の詳細は、Next.js Server Components documentation を参照してください。
  • NoteList.tsx ファイルの先頭にある 'use client' は、このファイルをクライアント側でレンダリングすべきであることを Next.js に示します。Next.js client components の詳細は、Next.js Client Components documentation を参照してください。