Next.js + 스플릿비

이 가이드는 Splitbee Next.js Proxy Documentation 의 확장 및 업데이트입니다. Next.js Script Component을 가이드에 추가했으며 몇 가지 삶의 질을 개선했습니다.

목차

Next.js 구성 설정

Analytics 구성 요소 생성

Analytics 구성 요소 사용

Next.js 구성 설정

먼저 Next.js Rewrites을 사용하여 로컬 페이로드 URL이 Splitbee 서버를 가리키도록 해야 합니다.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/bee.js',
        destination: 'https://cdn.splitbee.io/sb.js',
      },
      {
        source: '/_hive/:slug',
        destination: 'https://hive.splitbee.io/:slug',
      },
    ]
  },
}

module.exports = nextConfig

Analytics 구성 요소 만들기

다음으로 Splitbee 코드를 가져오는 스크립트 태그를 추가합니다. original documentation에 따라:

data-api sets the endpoint for all tracking calls. We are using /_hive in this example.

src needs to point to the Splitbee JS file that is proxied through your servers. We are using /bee.js in this example. Feel free to adapt those paths & filenames.

로직을 Analytics 구성 요소로 추상화할 수 있습니다.

// components/Analytics.tsx
import Script from 'next/script'

export const Analytics: React.VFC = () =>
  typeof window != 'undefined' &&
  window.location.href.includes('[site_url]') ? (
    <Script src="/bee.js" data-api="/_hive" strategy="afterInteractive" />
  ) : null

[site_url]의 window.location.href.includes('[site_url]')를 프로덕션 배포 도메인의 이름으로 바꿉니다. 이렇게 하면 개발 중에 콘솔에 오류가 나타나는 것을 방지할 수 있습니다.

필요에 따라 전략 속성을 조정할 수도 있습니다(사용 가능한 옵션은 documentation 참조). 그러나 대부분의 경우 "afterInteractive" 를 고수해야 합니다.

Analytics 구성 요소 사용

이제 남은 것은 Analytics 구성 요소를 응용 프로그램으로 가져오는 것입니다. 이상적으로는 중복을 피하기 위해 _app.tsx에서 가져옵니다.

// pages/_app.tsx
import { Analytics } from 'components/Analytics'

import type { AppProps } from 'next/app'

const App: React.VFC<AppProps> = ({ Component, pageProps }) => (
  <>
    <Analytics />
    <Component {...pageProps} />
  </>
)

export default App