next/script
概要
サードパーティのスクリプトを読み込む際に用いられる
サードパーティ製のスクリプト
分析ログ
warning.icon パフォーマンスへの不必要な影響を最小限に抑えるため、特定のページまたはレイアウトにのみ含めたほうが良い
Application Script はなるべく避ける
Layout Script
任意の Route でサードパーティスクリプトを読み込む code:app/dashboard/layout.tsx
import Script from 'next/script'
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<section>{children}</section>
</>
)
}
サードパーティスクリプトは、<Script> を設置した layout.tsx のネストされたルートでも読み込まれる ただし、ユーザがレイアウト内の複数の Route 間を移動しても 1 回しか読み込まれない
Application Script
すべての Route でサードパーティスクリプトを読み込む code:app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
サードパーティスクリプトは、ユーザが複数のページ間を移動しても 1 回しか読み込まれない