# Next.jsでheadタグの中にlinkでスタイルシート指定をする方法

## 概要

Next.jsのApp Routerを使っている場合に、以下のように&lt;head&gt;タグの中に&lt;link&gt;タグで外部のスタイルシートを指定したい場合の方法を解説します。

```html:HTML
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://example.com/assets/example.css"
      data-precedence="default"
    />
  </head>
</html>
```

## Scriptコンポーネントを使う

次のように[Scriptコンポーネント](https://nextjs.org/docs/app/api-reference/components/script)を使うことで、概要に示したHTMLのように出力されます。

```tsx:page.tsx
import Script from 'next/script'

export default function Page() {
  return <Script stylesheets={['https://example.com/assets/example.css']} />
}
```

## 使用例

[Third Party LibrariesのYouTubeの埋め込み](https://github.com/vercel/next.js/blob/canary/packages/third-parties/src/google/youtube-embed.tsx#L31)で使用されています。
