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

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

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

Squid and Netlify

作成するもの:​

  • Squid と Next.js を使用し、Netlify 上で実行されるノートアプリケーション。
  • このアプリは Squid の組み込みデータベースを利用しているため、設定と実行が迅速に行えます。

学習できる内容:​

  • リアルタイムで最新状態を維持しながら、サーバーとクライアントの両方でデータのクエリとレンダリングを行う方法。
  • クライアント側でのデータの変更。
  • Netlify の環境変数と連携するように Squid Client SDK を設定する方法。

TypeScript の経験が必要です。Next.js や Netlify の経験は役立ちますが、必須ではありません。

環境のセットアップ​

  1. ノートアプリのコードサンプルをダウンロード:
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. 新しいターミナルウィンドウを開き、ノートアプリのフロントエンドに移動します。これで、アプリのバックエンド用とフロントエンド用の、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"
...

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

ノートアプリのコンポーネント

ノートアプリには、アプリの外観と動作を管理する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. ノートアプリのバックエンド用に開いているターミナルで、以下のコマンドを実行して Squid バックエンドをローカルで起動します:
squid start
  1. ノートアプリのフロントエンド用のターミナルで、以下のコマンドを実行して Next.js フロントエンドを起動します:
netlify dev --live

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

これで完了です！​

おめでとうございます！ Next.js と Squid を使用したノート作成アプリケーションを正常に作成し、Netlify 上でローカルに提供することに成功しました。Netlify とともに、Squid はリアルタイムデータを活用し、数百万のユーザーにスケール可能なアプリケーションの構築とデプロイをシームレスに実現します。

次に試してみること:

追加の注意点​

ノートアプリの機能​

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

  1. モーダルで Add Note をクリックすると、新しいノートがノート一覧に表示され、モーダルは数分の1秒で閉じます。これは、Squid Client SDK が楽観的な更新（ローカル状態を更新しつつ、同時にサーバーに変更を送信する仕組み）を行うためです。サーバーの更新が失敗した場合、クライアントは以前のデータに戻ります。

  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 など、さまざまな機能を Squid バックエンドに追加することも可能です。すべてのオプションについては、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 をご覧ください。