imdb clone Part13 10 読み込み処理を追加する

概要

目次

今回は読み込み時のアニメーションを実装します。

以下gifアニメは読み込み処理が実行されている様子です。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

loading-ioから　画像を用意します。

loading.jsを新規作成します。next.js側の機能の模様。

コード部分

loading

loading.jsx

export default function loading(){
    return(
        <div className="flex justify-center">
            <img className="h-96" src="spinner.svg" alt="loading..." />
        </div>

    )
}

参考

next.js Loading UI and Streaming

{next:{revalidate: 10000}}→　ISR(動的サイト作成）

その他

Udemy

githubコミット分