【Next.js】無駄なレンダリングを簡単に見つける方法

Next.js

Posted at 2024-11-20

React Scanを使用すると無駄なレンダリングを簡単に見つけられます。

インストール

Next.jsのApp Routerに導入するには app/layout.tsx を以下のように記述します。

app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <head>
        <script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
        {/* 他の script */}
      </head>
      <body>{children}</body>
    </html>
  )
}

使用方法

ブラウザで動作確認をするとレンダリングされた箇所が強調表示されます。
無駄にレンダリングされている場合にはコンポーネント名の前に 🔥 が表示されます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up