next.js 에서는 페이지 성능 개선을 위해 서드파티 script를 가져올 수 있는 next/script 컴포넌트를 제공한다.
사용법
import
1
import Script from 'next/script'
Page script
페이지 컴포넌트에서 사용될 수 있으며, 페이지가 브라우저에 로드되면 script를 fetch하고 실행한다.
1
2
3
4
5
6
7
8
9
import Script from 'next/script'
export default function Dashboard() {
return (
<>
<Script src="https://example.com/script.js" />
</>
)
}
Application script
모든 경로에서 같은 script를 추가하고 싶다면 Custom App 에서 다음과 같이 사용할 수 있다. Page script와 마찬가지로 페이지가 로드되면 스크립트를 가져온다.
1
2
3
4
5
6
7
8
9
10
11
12
// pages/_app.js
import Script from 'next/script'
export default function MyApp({ Component, pageProps }) {
return (
<>
<Script src="https://example.com/script.js" />
<Component {...pageProps} />
</>
)
}
어떤 경로로 접근하든 위 스크립트는 불러와지고, next.js는 위 script가 딱 한번만 불러와질수 있도록 보장한다. 하지만, 모든 페이지에서 같은 script를 사용하는 경우는 거의 없으니 쓸모없는 성능 저하를 막기 위해 특정 페이지에서만 script를 불러오도록 설정하는 것이 좋다.
Strategy
next/script 컴포넌트의 속성인 strategy를 통해 스크립트가 불러오는 타이밍에 대해 설정할 수 있다.
beforeInteractive: 유저에게 전달되는 최초 HTML에 삽입되며, next.js 코드를 불러와 hydration이 일어나기 전에 로드한다. 스크립트 로드는 next.js 로드 전에 이뤄지지만, 스크립트 실행은 next.js 로드를 막지 않는다.- Custom Document 안에서만 사용해야한다. 따라서 모든 페이지에서 필요한 스크립트일 경우에만 사용한다.
- 또는 반드시 제일 먼저 실행해야하는 경우에만 사용한다.
- ex) bot detector, cookie consent managers
afterInteractive: 디폴트 설정으로, hydration이 어느정도 진행된 후에 불러온다.- 가능한한 빨리 불러와야하는 스크립트지만, next.js 코드보다는 늦게 불러와도 될 때 사용한다.
- ex) Analytics
lazyOnload: 브라우저가 한가할 때 가져온다.(필요한 모든 리소스를 다 가져온 상태).- ex) Chat support plugins, Social media widgets
worker: 웹 워커 안에서 스크립트를 불러온다. next.js v13.1.2 기준으로 베타 단계인 기능이다.사용하기 위해선 다음과 같이
next.config.js에 설정해줘야한다.1 2 3 4 5
module.exports = { experimental: { nextScriptWorkers: true, }, }
Inline Scripts
다음과 같이 inline으로 스크립트 코드를 직접 작성할 수 있다. 다만 이때는 id 속성을 만드시 지정해야한다.
1
2
3
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>
dangerouslySetInnerHTML를 사용할 수도 있다.
1
2
3
4
<Script
id="show-banner"
dangerouslySetInnerHTML=
/>
onLoad, onReady, onError
스크립트 로드 상태에 따라 별도의 코드를 실행시키고 싶을 수 있다. next/script에서는 이를 위해 다음과 같은 속성을 제공한다. 콜백함수 안에서는 스크립트의 코드를 사용할 수 이다.
onLoad: 스크립트의 로딩이 종료되면 콜백함수 실행beforeInteractive일때는 사용할 수 없음.
onReady: 스크립트의 로딩이 종료되고, 네비게이션 등으로 컴포넌트가 마운트 될 때마다 콜백함수 실행한다.onError: 스크립트 로딩에 실패했을 경우 콜백함수 실행
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
onLoad={() => {
console.log(_.sample([1, 2, 3, 4])) // lodash 코드 사용가능
}}
/>
</>
)
}
추가적인 attributes
next/script에서는 일반적인 <script> 태그의 DOM attribute 중 next/script에서 사용하지 않는 attribute를 <script>태그에 부여한다. 따라서 nonce나 data-*로 시작하는 custom data attribute도 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
id="example-script"
nonce="XUENAJFW"
data-test="script"
/>
</>
)
}
출처
https://nextjs.org/docs/basic-features/script