Home

ローディングの作成

loading.tsxの作成

frontend/src/app/loading.tsx

const Loading = () => {
  return (
    <>
      <div className="flex min-h-screen items-center justify-center">
        <div className="h-12 w-12 animate-spin rounded-full border-t-4 border-blue-500"></div>
      </div>
    </>
  );
};

export default Loading;

layout.tsxにタグを追加

frontend/src/app/layout.tsx

import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
import Header from './components/Header';
import Footer from './components/Footer';
import { Suspense } from 'react'; // <- 追加
import Loading from './loading'; // <- 追加
...（略）...
export default function RootLayout({
...（略）...
  return (
...（略）...
        <div className="flex min-h-screen flex-col">
          <Header />
          <main className="flex-grow">
            <Suspense fallback={<Loading />}>{children}</Suspense> {/* <- 修正 */}
          </main>
          <Footer />
        </div>
...（略）...
  );
}

ローディングの確認

frontend/src/services/movies/getMovie.ts

...（略）...
const getMovie = async (movieId: number): Promise<{ movie: Movie }> => {
  await new Promise((resolve) => setTimeout(resolve, 1000)); // <- 追加
  return await fetcher(`${context.apiRootUrl?.replace(/\/$/g, '')}/movies/${movieId}/`, {
...（略）...
  });
};

export default getMovie;

ブラウザで下記URLにアクセスすると、ページが読み込まれるまでの間、ローディングのアニメーションが表示されます。

• http://localhost:3000/movies/1

確認できたら、追加した行は削除してください。

参考

1. 【Next.js13】最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座 | Udemy
   • ローディング用ページを作成して遅延した際のローディングを実装してみよう
2. Suspense – React
3. Routing: Loading UI and Streaming | Next.js