概要
Next.jsのApp Routerを使っている場合に、以下のように<head>タグの中に<link>タグで外部のスタイルシートを指定したい場合の方法を解説します。
HTML
<html>
<head>
<link
rel="stylesheet"
href="https://example.com/assets/example.css"
data-precedence="default"
/>
</head>
</html>Scriptコンポーネントを使う
次のようにScriptコンポーネントを使うことで、概要に示したHTMLのように出力されます。
page.tsx
import Script from 'next/script'
export default function Page() {
return <Script stylesheets={['https://example.com/assets/example.css']} />
}使用例
Third Party LibrariesのYouTubeの埋め込みで使用されています。
