Next.js 13 からBetaとして React 18 に準拠したappディレクトリが導入された。

まだロードマップ公開中で、本番では使えないが、ネストされた共通レイアウトはやはり便利。

appDirによってデフォルトでサーバーコンポーネントとして扱われるようになった。例外としてファイル先頭に"use client";を書くことで、そのファイル内はクライアントサイドで実行される。

そこで"use client";とuseEffectを使い、10秒毎にブラウザを再読み込みするようにした。Unsplashの画像がランダムで切り替わることでリロードが確認できる。

// ./app/page.jsx

import Reload from "./component/Reload";

export default function Page() {
    return (
        <>
            <h1>Auto reflesh</h1>
            <img src="https://source.unsplash.com/random/500x500" />
            <Reload />
        </>
    )
}

// ./app/component/Reload.jsx

"use client";
import { useEffect } from "react";

export default function Reload() {
    useEffect(() => {
        setInterval(() => {
            location.reload()
        }, 10 * 1000); //10秒毎
    });
    return null;
}