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

Next.js と Netlify を使用した Notes アプリ

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

Squid and Netlify

構築するもの:​

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

学べること:​

  • サーバー側とクライアント側の両方でデータをクエリおよびレンダリングし、リアルタイムで最新の状態に保つ方法
  • クライアント側でのデータのミューテーション
  • 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つのターミナルウィンドウが開いている状態になります。
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 ファイルを開きます。プレースホルダーをあなたのアプリ ID に置き換えてください。アプリ ID はバックエンドの .env ファイルおよび Squid Console に記載されています。
netlify.toml
...
SQUID_APP_ID = "YOUR_APP_ID"
...

Notes アプリのコンポーネントを確認​

Notes App Components

Notes アプリには、アプリの外観と動作を管理する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();

ローカルで Notes アプリを実行​

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

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

これで完了です！​

おめでとうございます！ Next.js と Squid を使用したノート作成アプリケーションの作成に成功し、Netlify 上でローカルに提供することができました。Netlify と Squid を組み合わせることで、リアルタイムデータを活用し、数百万人規模にスケールするアプリケーションをシームレスに構築およびデプロイできます。

次に試してみること:

  • Squid React SDK の基礎を試すために React CRUD app を構築してみましょう。
  • Squid バックエンドのデプロイ 方法を学びましょう。
  • Squid のデータ照会機能の詳細については Client SDK documentation をご覧ください。
  • Squid Backend SDK を使用してアプリデータのセキュリティを確保します。
  • 利用可能な Integrations を確認して、Squid をあなたのデータベース、認証、API ツールに接続する方法を見てみましょう。
  • Next.js と Squid の利用方法の詳細については this tutorial をご覧ください。
  • Squid と Netlify を使用したフルスタックアプリについては、this tutorial をご参照ください。

追加のノート​

Notes アプリの機能​

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

  1. モーダル内の Add Note をクリックすると、新しいノートがノートリストにすぐに表示され、モーダルがほんの一瞬で閉じます。これは、Squid Client SDK が楽観的更新（optimistic updates）を行い、ローカルの状態を更新しながらサーバーにもミューテーションを送信するためです。もしサーバーの更新が失敗した場合、クライアントは以前のデータにフォールバックします。

  2. 新しいタブを開いて同じ URL に移動すると、作成したノートが即座に表示されます。これは、アプリが withServerQuery サーバコンポーネントを使用して、サーバー側でデータをフェッチし、事前レンダリングされた状態でクライアントに送信するためです。これはアプリのパフォーマンスを向上させる優れた方法です。

  3. あるタブでノートリストとやり取りすると、他のタブのノートリストも更新されます。これは、Squid Client SDK がデータの変更を自動的にサブスクライブし、ローカルの状態を更新するためです。

Squid の環境​

  • Squid は開発用の dev と本番用の prod という2種類のターゲット環境を提供します。このチュートリアルでは dev 環境を使用します。詳細は Squid の environments をご確認ください。
  • あなたの Squid developer ID は、プロジェクトをローカルで実行する際にのみ使用されます。
  • ローカル開発専用であるため、context.prod.environment の SQUID_DEVELOPER_ID は意図的に空欄にしています。これは、開発用の .env.local ファイルに設定されるためです。netlify.toml ファイルに空欄として追加することで、本番ビルドに含まれないようにしています。

Squid の機能​

  • Squid の組み込みデータベースを使用する場合、追加のカスタマイズなしで Squid バックエンドは完全に機能します。さらに、データベースイベントに応じて Schedulers や Triggers のような機能、また生の SQL やデータベース固有のクエリを実行する native queries などの機能を追加することも可能です。詳細は Backend SDK docs をご覧ください。
  • 組み込みデータベースはドキュメントベースであるため、notes コレクションはドキュメントの集合を表します。SQL データベースを使用する場合、コレクションはテーブルを表し、ドキュメントがテーブルの行となります。

Next.js リンク​

  • layout.tsx 内の Notes 関数は Next.js のサーバコンポーネントです。Next.js のサーバコンポーネントについては、Next.js Server Components documentation をご覧ください。
  • NoteList.tsx ファイル冒頭の 'use client' は、このファイルがクライアント側でレンダリングされるべきであることを Next.js に示しています。Next.js のクライアントコンポーネントについては、Next.js Client Components documentation をご覧ください.