This guide is an extension and update of the Splitbee Next.js Proxy Documentation. I have added the Next.js Script Component to the guide, along with a few more quality-of-life improvements.
Table of Contents
- Next.js Config Setup
- Creating the Analytics Component
- Using the Analytics Component
Next.js Config Setup
First, we need to make use of Next.js Rewrites to point the local payload url to the Splitbee server.
// 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
Creating the Analytics Component
Next, we add a script tag that imports the Splitbee code. As per the 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.
We can abstract the logic into an Analytics component.
// 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
Replace [site_url]
in window.location.href.includes('[site_url]')
with the name of your production deployment domain. This will prevent errors from popping up in the console during development.
You can also adjust the strategy attribute according to your needs (view the documentation for the available options). However, in most cases, you should stick to "afterInteractive"
.
Using the Analytics Component
Now all that remains is to import the Analytics component into the application – ideally in _app.tsx
to avoid duplication.
// 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
Top comments (0)