Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@remkoj/optimizely-one-nextjs

Package Overview
Dependencies
Maintainers
0
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remkoj/optimizely-one-nextjs

Source
npmnpm
Version
2.0.0
Version published
Weekly downloads
431
172.78%
Maintainers
0
Weekly downloads
 
Created
Source

Next.JS Optimizely One toolkit

React components (both client & server) to integrate the browser-side products from Optimizely (Web Experimentation, Data Platform & Content Analytics / Recommendations)

Requirements

  • Next.JS 14.1+
  • TypeScript
  • Access to the Optimizely One Products

Installing & Usage

Start by adding the package to your project: yarn add @remkoj/optimizely-one-nextjs

Add API Routes

Then make the service endpoints available by creating a new API route within Next.JS. For the app router this is done by creating this file:

app/api/me/[[...path]]/route.ts

Put the following code in this file to use the API Route handler from the package:

import { createOptimizelyOneApi } from '@remkoj/optimizely-one-nextjs/server';

const handler = createOptimizelyOneApi()

export const GET = handler
export const POST = handler
export const runtime = 'edge' // 'nodejs' (default) | 'edge'
export const dynamic = 'force-dynamic'
export const dynamicParams = true
export const fetchCache = 'default-no-store'

Add Provider & PageTracker to your layout

Within the global layout (or your "third party providers component", whatever applies best), add the Optimizely One Scripts (Scripts.Header & Scripts.Footer), Context Provider (OptimizelyOneProvider), Page Activator (PageActivator), and - if you want to - the demo gadget (OptimizelyOneGadget).

import { Scripts } from '@remkoj/optimizely-one-nextjs/server'
import { OptimizelyOneProvider, PageActivator } from '@remkoj/optimizely-one-nextjs/client'
import OptimizelyOneGadget from '@remkoj/optimizely-one-nextjs/optimizely-one-gadget'

export type RootLayoutProps = {
    children: React.ReactNode
}

export default function RootLayout({ children }: RootLayoutProps) 
{
    return <html>
        <head>
            <Scripts.Header />
        </head>
        <body>
            <OptimizelyOneProvider value={{ debug: true }}>
                <PageActivator />
                { children }
                <OptimizelyOneGadget />
            </OptimizelyOneProvider>
            <Scripts.Footer />
        </body>
    </html>
}

Instrument your site with additional events

Whenever you want to track additional events, use the provided hook to get to the context and send events.

'use client'
import React, { type FunctionComponent } from 'react'
import { useOptimizelyOne } from '@remkoj/optimizely-one-nextjs/client'

export const YourComponent : FunctionComponent<{}> = props => {
    const opti = useOptimizelyOne()

    function handler() 
    {
        opti?.track({ event: "name", action: "action" })
    }

    return <button onClick={() => handler()}>Output</button>
}

FAQs

Package last updated on 26 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Vite+ Joins the Push to Consolidate JavaScript Tooling

Security News

Vite+ Joins the Push to Consolidate JavaScript Tooling

Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.

By Sarah Gooding  -  Oct 15, 2025