1. HOME
  2. ブログ
  3. エンジニアリング
  4. ReactのSuspenseでローディングをリッチにする【Next.js】

BLOG

ブログ

エンジニアリング

ReactのSuspenseでローディングをリッチにする【Next.js】

本章では、ReactのSuspenseを使ってローディングを実装していく方法を解説していきます。

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

  1. Next.jsの開発環境をセットアップ
  2. 画面デザインしながら基礎を学ぼう
  3. App Routerを理解して使ってみよう
  4. Next.js+Postgres+PrismaでDB設計
  5. サーバコンポーネントでデータ取得
  6. サーバアクションでデータ変更
  7. Vercel Blobで画像アップロード実装
  8. Suspenseでローディングをリッチに
  9. Zodを使ってバリデーション実装
  10. useActionStateでローディング実装
  11. Auth.js v5で認証機能導入
  12. Route HandlersでAPIを設計

動画で学びたい方はこちらから！

Suspenseとは？

Suspenseとは、コンテンツ読み込み中にローディング画面を表示できる機能です。

以下のように記述できます。

<Suspense fallback={<Loading />}>
  <MainComponent />
</Suspense>

上記の例の場合、MainComponentの読み込み中に Loadingを表示し、MainComponentの読み込みが完了すると、Loadingは表示されなくなります。

Suspenseを使ってみよう

それでは、実際にSuspenseを使ってみましょう。

ダッシュボード

app/(main)/dashboard/page.tsx

import BreadCrumbs from "@/components/layouts/bread-crumbs";
import IconSkeleton from "@/components/skeletons/icon-skeleton";
import UserSkeleton from "@/components/skeletons/user-skeleton";
import { fetchDashboard } from "@/lib/apis";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <BreadCrumbs title="ダッシュボード 🐾" />
      <Suspense fallback={<UserSkeleton />}>
        <Dashboard />
      </Suspense>
    </>
  );
}

新着投稿

import BreadCrumbs from "@/components/layouts/bread-crumbs";
import PostsWithUserSkeleton from "@/components/skeletons/posts-with-user-skeleton";
import { fetchLatestPosts } from "@/lib/apis";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

export default async function Page() {
  return (
    <>
      <BreadCrumbs title="新着投稿 🐾" />
      <Suspense fallback={<PostsWithUserSkeleton />}>
        <Posts />
      </Suspense>
    </>
  );
}

オーナー一覧

import BreadCrumbs from "@/components/layouts/bread-crumbs";
import IconSkeleton from "@/components/skeletons/icon-skeleton";
import UsersSkeleton from "@/components/skeletons/users-skeleton";
import { fetchLatestUsers } from "@/lib/apis";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <BreadCrumbs title="オーナー一覧 🐾" />
      <Suspense fallback={<UsersSkeleton />}>
        <Users />
      </Suspense>
    </>
  );
}

オーナー詳細

import BreadCrumbs from "@/components/layouts/bread-crumbs";
import IconSkeleton from "@/components/skeletons/icon-skeleton";
import UserSkeleton from "@/components/skeletons/user-skeleton";
import { fetchUser } from "@/lib/apis";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";

export default function Page({ params }: { params: { id: string } }) {
  return (
    <>
      <BreadCrumbs title="オーナー 🐾" />
      <Suspense fallback={<UserSkeleton />}>
        <UserDetail params={params} />
      </Suspense>
    </>
  );
}

まとめ

以上、Suspenseを使ってローディング画面を作成する方法でした。

次回は、バリデーションの実装方法を学んでいきます。

Next.jsにZodを導入してバリデーションを実装しよう
本章では、Next.jsで開発されたアプリケーションにバリデーション機能を実装する方法を学びます。チュートリアルの全体像本チュートリアルを通じて学べる内容は以下のようになります。Next.jsの開発環境をセットアップ画面デザインしながら基礎を学ぼうApp Routerを理解して使ってみようNext.js+Postgres+PrismaでDB設計サーバコンポーネントでデータ取得サーバアクションでデータ変更Vercel Blobで画像アップロード実装SuspenseでローディングをリッチにZodを使ってバリデーション実装useActionStateでローディング実装Auth.js v5で認...

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事