- Layout Scripts
여러 경로에 대한 서드파티 스크립트를 로드하려면 next/script를 가져와 레이아웃 컴포넌트에 직접 스크립트를 포함한다.
// app/dashboard/layout.tsx
import Script from 'next/script';
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
)
}사용자가 폴더 경로(예: dashbaord/page.js) 또는 중첩된 경로(예: dashbaord/settings/page.js)에 액세스 하여 서드파티 스크립트를 가져온다. Next.js는 사용자가 동일한 레이아웃에서 여러 경로 사이를 탐색하더라도 스크립트가 한 번만 로드되도록 한다.
- Application Scripts
모든 경로에 대해 서드파티 스크립트를 로드하려면 next/script를 가져와 루트 레이아웃에 직접 스크립트를 포함한다.
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}이 스크립트는 애플리케이션의 경로에 액세스 할 때 로드되고 실행된다. Next.js는 사용자가 여러 페이지를 탐색하더라도 스크립트가 한 번만 로드되도록 한다. 그리고 성능에 대한 불필요한 영향을 최소화하기 위해 특정 페이지나 레이아웃에만 타사 스크립트를 포함하는 것이 좋다.
- Strategy
next/script의 기본 동작을 통해 모든 페이지 또는 레이아웃에서 타사 스크립트를 로드할 수 있지만 전략 속성을 사용하여 로드 동작을 미세 조정할 수 있다.
| beforeInteractive | Next.js 코드 이전과 페이지 하이드레이션이 발생하기 전에 스크립트를 로드한다. |
| afterInteractive | (default) 초기에 스크립트를 로드하지만 페이지에 일부 하이드레이션(Hydration: 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지로 만드는 과정, 보통 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지로 만듦) 이후에 로드한다. |
| lazyOnload | 나중에 브라우저 유휴 시간 동안 스크립트를 로드한다. |
| worker | (실험적) 웹 작업자에 스크립트를 로드한다. |
- Inline Scripts
인라인 스크립트 또는 외부 파일에서 로드되지 않는 스크립트도 스크립트 컴포넌트에서 지원된다. 중괄호 안에 JavaScript를 배치하여 작성할 수 있다.
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>또는 dangerlySetInnerHTML 속성을 사용하면 이렇다.
<Script
id="show-banner"
dangerouslySetInnerHTML-{{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/>Next.js가 스크립트를 추적하고 최적화하려면 인라인 스크립트에 id 속성을 할당하면 된다.
- Executing Additional Code
특정 이벤트가 발생한 후 추가 코드를 실행하기 위해 스크립트 컴포넌트와 함께 이벤트 핸들러를 사용할 수 있다.
| onLoad | 스크립트 로드가 완료된 후 코드를 실행한다. |
| onReady | 스크립트 로드가 완료된 후 컴포넌트가 마운트될 때마다 코드를 실행한다. |
| onError | 스크립트 로드되지 않은면 코드를 실행한다. |
이러한 핸들러는 next/script를 가져오고 "use client"가 코드의 첫 번째 줄로 정의된 클라이언트 컴포넌트 내부에서 사용하는 경우에만 작동한다.
// app/page.tsx
'use client'
import Script from 'next/script';
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onLoad={() => {
console.log('Script has loaded');
}}
/>
</>
)
}
- Additional Attributes
nonce 또는 사용자 지정 데이터 속성과 같이 Script 컴포넌트에서 사용하지 않은 <script> 요소에 할당할 수 있는 많은 DOM 속성이 있다. 추가 속성을 포함하면 HTML에 포함된 최적화된 최종 <script> 요소에 자동으로 전달된다.
// app/page.tsx
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"
/>
</>
)
}'Next.js' 카테고리의 다른 글
| Next.js 9-6 Static Assets (0) | 2023.06.14 |
|---|---|
| Next.js 9-5 Metadata (1) | 2023.06.13 |
| Next.js 9-3 Font Optimization (0) | 2023.06.08 |
| Next.js 11-13 Routing Internationalization (1) | 2023.06.08 |
| Next.js 11-12 Routing Project Organization File Colocation (0) | 2023.06.02 |