NextJS で CRUD をマスターする

Web 開発では、CRUD 操作は基本的な構成要素であり、データ管理に不可欠です。これらは、単純な Web サイトから複雑なエンタープライズ ソリューションに至るまで、事実上あらゆるアプリケーションに遍在しています。

NestJS Boilerplate ユーザーは、リソースとそのプロパティを自動的に作成できる強力な新しいツール CLI をすでに評価して使用できるようになりました。このツールを使用すると、コードを 1 行も手動で記述することなく、すべての CRUD 操作を実行し、必要なフィールドを追加できます。一方、繰り返し発表しているように、BC ボイラープレート エコシステムには、完全な機能を提供するための完全互換性のある Extensive-React-Boilerplate が含まれています (原則として、完全に独立したソリューションにすることができます)。次に、フロントエンドの観点から CRUD 操作を見てみましょう。

サーバー側レンダリング機能を備えた React フレームワークである Next.js では、パフォーマンス、SEO、開発者のエクスペリエンスを向上させる機能を使用して、これらの操作を効率的に管理できます。以前、NextJS プロジェクトを開始する効果的な方法に関する記事を公開しましたが、今回はさらに進んで、Next.js の API の操作の詳細とニュアンスを分析したいと思います。

ご存知のとおり、CRUD は作成、読み取り、更新、削除の頭字語です。この概念は、あらゆるデータに対して実行できる基本的な操作を表します。管理パネル ユーザーの例を使用して、CRUD 操作を検討してみましょう。ここでは、ユーザーの追加、編集、削除などの機能と、ユーザーに関する情報の取得が実装されています。 React Query でのデータ処理、ページネーション、エラー管理などを処理する、以下で説明するカスタム React フックは、すでに Extensive-React-Boilerplate に統合されています。当然のことながら、この定型文を直接利用することもできます。次のセクションでは、これらの機能の実装に関する洞察を共有します。

オペレーションの作成

ユースケース: 新しいリソースを作成するためにデータを送信します (ユーザー登録、新しい製品の追加など)。
実装: フォームからデータを収集し、POST リクエストをサーバーに送信し、応答を処理し、それに応じて UI を更新します。

例を見てみましょう。 API への POST リクエストの実行は、新しいユーザーの作成に組み込まれています。以下のスニペットでは、usePostUserService フックを使用してこのロジックをカプセル化しています。リクエストとレスポンスのタイプを定義することで、新しいユーザーを作成するためのデータ構造を指定しましたが、ここでは集中しやすいようにこの部分を省略します。これと以下のすべてのコード スニペットはリポジトリ Extensive-React-Boilerplate から取得したものであるため、より詳細な情報やより完全な全体像をリポジトリで確認できます。
そこで、useFetch フックを使用して POST リクエストを送信するカスタム フック usePostUserService を作成します。ユーザーデータを入力として受け取り、API に送信します:

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

wrapperFetchJsonResponse 関数については、この記事の後半で「エラー処理」を説明するときに説明します。

読み取り操作

ユースケース: リソースまたは単一リソースのリストを取得して表示します (ユーザー プロファイルや製品リストの取得など)。
実装: GET リクエストを送信してデータを取得し、読み込み状態とエラー状態を処理し、UI でデータをレンダリングします。

この例では、データの読み取りには、API に対して GET リクエストを発行してユーザー データを取得することが含まれます。これには、ページネーション、フィルターを使用したすべてのユーザーの取得、リクエスト (UsersRequest) と応答タイプ (UsersResponse) の定義後の ID による単一ユーザーの並べ替えまたは取得が含まれます。
カスタム useGetUsersService フックですべてのユーザーを取得するため、ページネーション、フィルター、並べ替えのクエリ パラメーターを含む GET リクエストを送信します。

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

単一ユーザーを取得する場合、useGetUserService フックは GET リクエストを送信し、ID でユーザーを取得します。

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}

更新操作

ユースケース: 既存のリソースの編集 (ユーザー情報の更新、ブログ投稿の編集など)。
実装: 更新されたデータを収集し、PUT または PATCH リクエストをサーバーに送信し、応答を処理して、UI を更新します。

既存のユーザーの更新を実行してみましょう。これには、更新されたユーザー データを含む PATCH リクエストを API に送信することが含まれます。このため、カスタム usePatchUserService フックで、リクエスト UserPatchRequest とレスポンス タイプ UserPatchResponse:
を定義した後、ユーザー ID と更新されたデータを含む PATCH リクエストを送信します。

function usePatchUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPatchRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "PATCH",
        body: JSON.stringify(data.data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPatchResponse>);
    },
    [fetch]
  );
}

注: 部分的なデータ更新には PUT の代わりに PATCH を使用する方が高度ですが、通常はリソース全体の更新には PUT が使用されます。

削除操作

ユースケース: リソースの削除 (ユーザーの削除やリストからの項目の削除など)。
実装: DELETE リクエストをサーバーに送信し、応答を処理し、削除を反映するように UI を更新します。

次の例では、ユーザーを削除するために、ユーザー ID を使用して API に DELETE リクエストを送信します。 useDeleteUsersService フックでリクエスト (UsersDeleteRequest) とレスポンス タイプ (UsersDeleteResponse) を定義した後、DELETE リクエストが送信され、ID でユーザーを削除します。

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

これらのフックは、HTTP リクエストの作成とレスポンスの処理の複雑さを抽象化します。このようなアプローチを使用すると、データ取得ロジックがカプセル化され、コンポーネント間で再利用できるため、クリーンで保守可能なコードベースが保証されます。

Next.js でのデータの取得

OK、CRUD オペレーションの処理例について説明しました。Next.js が提供するデータ取得方法を詳しく見てみましょう。これは、Next.js がフレームワークとして React に機能と最適化を追加しているためです。 Next.js が CSR (クライアントサイド レンダリング) を超えて、SSR (サーバーサイド レンダリング)、SSG (静的サイト生成) などの高度な機能を提供していることは明らかです。 🎜>)、組み込み API ルート、ハイブリッド レンダリング。それでは、Next.js と React でのデータ取得の共通点と相違点について説明しましょう。

React アプリは純粋にクライアント側であるため、最初のページの読み込み後にクライアント上でデータの取得が行われます。ページがロードされるたびにデータをフェッチする必要がある動的ページの場合、SSRを使用するのがより適しています。この場合、データはリクエスト時にサーバー上でフェッチされます。
SSG の場合、データが頻繁に変更されない静的ページに適しており、データはビルド時にフェッチされます。したがって、getStaticProps メソッドは、ビルド時にデータを取得する (SSG) に役立ちます。動的ルートとビルド時にフェッチされたデータに基づいてページを事前レンダリングする必要がある場合は、getStaticPaths メソッドを使用してこれを行うことができます。これは getStaticProps と組み合わせて使用​​され、ビルド時に動的ルートを生成します。 Next 14 以降では、これらのメソッドを使用せずにコンポーネント内で直接リクエストを行うことができるため、より「React エクスペリエンス」が得られることに注意してください。

useQuery を使用したクライアント側のデータ フェッチは、サーバー側でフェッチされたデータから初期状態がハイドレートされ、クライアント側でデータをフェッチする必要がある対話型コンポーネントに使用できます。頻繁に変更されるデータを取得したり、クライアント側の対話性を追加したりするには、useSWR 戦略が役立ちます。これは、キャッシュと再検証を使用してクライアント側でデータを取得するための React フックです。これにより、通常は最初のページの読み込み後に、クライアント側でデータをフェッチできるようになります。ただし、SSR のビルド時またはサーバー上でデータを取得することはありませんが、必要に応じて新しいデータを再検証して取得することができます。

上記のメソッドに関する情報を要約するために、Next.js のさまざまなデータ取得メソッドの包括的な概要を示し、それぞれのタイミングとユースケースを強調した表を見てみましょう。

Method	Data Fetching	Timing	Use Case
getStaticPaths	Static Site Generation (SSG)	At build time	Pre-render pages for dynamic routes based on data available at build time.
getStaticProps	Static Site Generation (SSG)	At build time	Pre-render pages with static content at build time. Ideal for content that doesn't change frequently.
getServerSideProps	Server-Side Rendering (SSR)	On each request	Fetch data on the server for each request, providing up-to-date content. Ideal for dynamic content that changes frequently.
useQuery	Client-Side Rendering (CSR)	After the initial page load	Fetch initial data server-side, hydrate, reduce redundant network requests, Background Refetching.
useSWR	Client-Side Rendering (CSR)	After the initial page load	Fetch and revalidate data on the client-side, suitable for frequently changing data.

Next.js で React Query を使用する

React Query は、サーバー状態の取得、キャッシュ、同期、更新のためのフックを提供し、React と Next.js アプリケーションの両方でデータを処理するための優れたツールとなります。これを使用する主な利点は次のとおりです:

• 効率的なデータ取得: キャッシュとバックグラウンド データの同期を処理し、冗長なネットワーク リクエストを削減します。
• 自動再取得: データが古くなった場合、バックグラウンドで自動的に再取得できるため、UI には常に最新の情報が表示されます。
• 統合されたエラー処理: エラーと再試行を処理するためのサポートが組み込まれており、ネットワーク障害とサーバー エラーの管理が容易になります。
• オプティミスティックな更新: useMutation フックは、オプティミスティックな UI 変更と、サーバー リクエストが失敗した場合のロールバック ロジックの両方を簡単に処理する方法を提供することで、オプティミスティックな更新を提供します。
• Next.js との統合の容易さ: getStaticProps や getServerSideProps などの他の Next.js データ取得メソッド (必要な場合) とシームレスに統合できます。
• クエリとミューテーションの検査: ReactQueryDevtools ツールは、すべてのアクティブなクエリとミューテーションのステータス、データ、エラー、その他の詳細を表示し、アプリケーションの実行中にリアルタイムでクエリの状態が更新されるのを監視する機能を提供します。 .

クエリクライアントプロバイダー

QueryClientProvider は、React コンポーネント ツリーに QueryClient インスタンスを提供するコンテキスト プロバイダー コンポーネントです。このインスタンスは、useQuery などのフックを使用するために必要です。 これを設定するには、コンポーネント ツリーのルートに配置し、再試行動作やキャッシュ時間などのクエリとミューテーションのグローバル設定を構成する必要があります。この後、React Query クライアントを初期化し、アプリケーション全体で利用できるようにします。

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

それでは、なぜそれをプロジェクトに追加する必要があるのでしょうか?以下の場合に有益です:

• すべてのクエリとミューテーションの一元化された構成。
• セットアップが簡単で、既存の React アプリケーションに統合できます。
• キャッシュ、バックグラウンド再取得、クエリの無効化などの機能を有効にします。

React クエリ開発ツール

React Query が提供するもう 1 つの重要な機能は、React Query Devtools です。これは、React Query の状態を検査およびデバッグするための開発ツールです。これはアプリケーションに簡単に追加でき、ブラウザ拡張機能を介して、または前の例のようにコンポーネントとしてアクセスできます。
開発中に、React Query Devtools を使用して、個々のクエリと変更を検査し、特定のクエリがプリフェッチする理由を理解し、クエリ キャッシュの状態を監視し、時間の経過とともにどのように変化するかを確認できます。

ページネーションと無限スクロール

ライブラリの機能を使用してページネーション コントロールや無限スクロールを実装するには、useInfiniteQuery が最適です。まず、React Query でクエリをキャッシュおよび取得するための一意のキーを生成します。ここでの by メソッドは、並べ替えとフィルターのオプションに基づいて一意のキーを作成します。

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

これを行うには、React Query の useInfiniteQuery 関数を使用し、読み取り操作セクションで前述した useGetUsersService フックを使用します。

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

ここでの

QueryFn は、現在のページ、フィルター、および並べ替えパラメーターに基づいてユーザー データを取得し、getNextPageParam 関数は、最後のページの応答に基づいて取得する次のページを決定します。ユーザーがスクロールするか、追加のデータを要求すると、useInfiniteQuery は nextPage パラメーターに基づいて次のデータ セットを自動的に取得します。これが無限スクロールの仕組みです。クエリのキャッシュ時間は gcTime パラメータによって設定されます。

全体として、React Query は、React アプリケーションのサーバー状態の管理とデバッグのための包括的なソリューションを提供します。 QueryClientProvider は、すべてのクエリとミューテーションに対して一元化された一貫した構成を保証します。一方、ReactQueryDevtools は、開発中にクエリの動作を検査して理解するための強力なツールを提供します。

エラー処理

CRUD 操作の実装には、使いやすさとアプリケーションの信頼性を確保するために、常に適切なエラー処理が必要です。サーバー エラーは通常、クライアント要求の処理の失敗、サーバー コードのエラー、リソースの過負荷、インフラストラクチャの構成ミス、または外部サービスの障害に関連しています。エラー処理については、Extensive-react-boilerplate では、wrapperFetchJsonResponse 関数の使用を推奨しています。

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}

結論

この記事では、基本的な CRUD 操作について説明し、NextJS でのデータ取得テクニックについて説明しました。 React Query を使用して状態を管理する方法について詳しく説明し、データ取得のデバッグと最適化のための QueryClientProvider と ReactQueryDevtools の機能の概要も説明しました。さらに、大規模なデータセットを処理するためのページネーションと無限スクロールの実装について説明し、アプリケーションの回復力を高め、スムーズなユーザー エクスペリエンスを保証するためのエラー処理に対処しました。

この記事で説明した例とテクニックに従うことで、NextJS プロジェクトで CRUD 操作を処理するための準備が整っているはずです。あるいは、プロジェクトに Extensive-react-boilerplate テンプレートを使用することもできます。これには完全な互換性のある Nestjs-boilerplate バックエンドがあり、CLI を使用して 1 行のコードを使用することなく、数分で CRUD 操作を操作できる機能を実装しています。エンティティ関係については、こことここで詳しく説明しています。実験を続け、ベスト プラクティスの最新情報を常に入手してください。役立つと思われる場合は、この定型文をぜひお試しください。

当社の BC ボイラープレート チームは、開発を強化する方法を常に模索しています。 GitHub ディスカッションや以下のコメントについてのご意見をお待ちしております。

この記事の全クレジットは Olena Vlasenko と Vlad Shchepotin にあります ??

以上がNextJS で CRUD をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。