yarn add @flagship.io/react-sdk

//startFlagshipSDK.js

// Importing required modules from the Flagship React SDK
const { DecisionMode, Flagship, FSSdkStatus } = require("@flagship.io/react-sdk");

// Function to start the Flagship SDK
async function startFlagshipSDKAsync() {
    // Check if the Flagship SDK has already been initialized
    if (Flagship.getStatus() && Flagship.getStatus() !== FSSdkStatus.SDK_NOT_INITIALIZED) {
        return Flagship; // If it has been initialized, return early
    }
    // Start the Flagship SDK with the provided environment ID and API key
    return await Flagship.start(process.env.NEXT_PUBLIC_ENV_ID, process.env.NEXT_PUBLIC_API_KEY, {
        fetchNow: false, // Do not fetch flags immediately
        decisionMode: DecisionMode.DECISION_API // set decision mode : DECISION_API or BUCKETING
    });
}

// Export the startFlagshipSDK function
module.exports = { startFlagshipSDKAsync };

//next.config.js

// Importing the startFlagshipSDK function from the startFlagshipSDK module
const { startFlagshipSDKAsync } = require('./startFlagshipSDK');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

// Exporting a function that returns the Next.js configuration object
module.exports = () => {
  // Check if the 'dev' or 'start' argument is present in the process arguments
  if (process.argv.includes('dev') || process.argv.includes('start')) {
    startFlagshipSDKAsync(); // If it is, start the Flagship SDK
  }
  return nextConfig; // Return the Next.js configuration object
};

//pages/__page.jsx

import { FlagshipProvider } from '@flagship.io/react-sdk'
import '../styles/globals.css'


function MyApp({ Component, pageProps }) {
  const { initialVisitorData, initialFlagsData } = pageProps
  return (
    
      
    )

}

export default MyApp

// pages/index.jsx

// Importing required modules from the Flagship React SDK
import {
  useFsFlag,
  useFlagship,
  Flagship,
  HitType,
  EventCategory,
} from "@flagship.io/react-sdk";
import styles from "../styles/Home.module.css";

// Home page component
export default function Home() {
  // Get the Flagship instance
  const fs = useFlagship();

  // Get the value of the 'my_flag_key' flag
  const myFlag = useFsFlag("my_flag_key");

  // Function to send a hit to Flagship
  const onSendHitClick = () => {
    fs.sendHits({
      type: HitType.EVENT,
      category: EventCategory.ACTION_TRACKING,
      action: "click button",
    });
  };

  return (
    

      

        
Next ServerSide Rendering Integration With Flagship [SSR]
        
flag key: my_flag_key
        
flag value: {myFlag.getValue("default-value")}
         {
            onSendHitClick();
          }}
        >
          Send hits
        
      
    
  );
}

// This function runs only on the server side
export async function getServerSideProps(context) {
  const { res, req } = context;

  // Get the visitor ID from the 'fs_visitorID_cookie' cookie if it exists
  const fs_visitorID_cookie = req.cookies["fs_visitorID_cookie"];

  // Define initial visitor data
  const initialVisitorData = {
    id: fs_visitorID_cookie, // If the cookie does not exist, the SDK will generate a new visitor ID
    hasConsented: true,
    context: {
      any: "value",
    },
  };

  // Create a new visitor using the initial visitor data
  const visitor = Flagship.newVisitor({
    visitorId: initialVisitorData.id,
    context: initialVisitorData.context,
    hasConsented: initialVisitorData.hasConsented
  });

  // Fetch flags for the visitor
  await visitor.fetchFlags();

  // Set the 'fs_visitorID_cookie' cookie with the visitor ID
  res.setHeader("Set-Cookie", `fs_visitorID_cookie=${visitor.visitorId}`);

  // Pass data to the page via props
  return {
    props: {
      initialFlagsData: visitor.getFlags().toJSON(),
      initialVisitorData: {
        ...initialVisitorData,
        id: visitor.visitorId,
      },
    },
  };
}

// pages/index.jsx

// Importing required modules from the Flagship React SDK
import {
  useFsFlag,
  useFlagship,
  HitType,
  EventCategory,
} from "@flagship.io/react-sdk";
import styles from "../styles/Home.module.css";
import { startFlagshipSDKAsync } from "../startFlagshipSDK"; // Importing startFlagshipSDKAsync function

// Home page component
export default function Home() {
  // Get the Flagship instance
  const fs = useFlagship();

  // Get the value of the 'my_flag_key' flag
  const myFlag = useFsFlag("my_flag_key");

  // Function to send a hit to Flagship
  const onSendHitClick = () => {
    fs.hit.sendHits({
      type: HitType.EVENT,
      category: EventCategory.ACTION_TRACKING,
      action: "click button",
    });
  };

  return (
    

      

        
Next ServerSide Rendering Integration With Flagship [SSR]
        
flag key: my_flag_key
        
flag value: {myFlag.getValue("default-value")}
         {
            onSendHitClick();
          }}
        >
          Send hits
        
      
    
  );
}

// This function runs only on the server side
export async function getServerSideProps(context) {
  const { res, req } = context;

  // Get the visitor ID from the 'fs_visitorID_cookie' cookie if it exists
  const fs_visitorID_cookie = req.cookies["fs_visitorID_cookie"];

  // Define initial visitor data
  const initialVisitorData = {
    id: fs_visitorID_cookie, // If the cookie does not exist, the SDK will generate a new visitor ID
    hasConsented: true,
    context: {
      any: "value",
    },
  };

  // start the SDK et get the Flagship instance
  const flagship = await startFlagshipSDKAsync();

  // Create a new visitor using the initial visitor data
  const visitor = flagship.newVisitor({
    visitorId: initialVisitorData.id,
    context: initialVisitorData.context,
    hasConsented: initialVisitorData.hasConsented
  });

  // Fetch flags for the visitor
  await visitor.fetchFlags();

  // Set the 'fs_visitorID_cookie' cookie with the visitor ID
  res.setHeader("Set-Cookie", `fs_visitorID_cookie=${visitor.visitorId}`);

  // Pass data to the page via props
  return {
    props: {
      initialFlagsData: visitor.getFlags().toJSON(),
      initialVisitorData: {
        ...initialVisitorData,
        id: visitor.visitorId,
      },
    },
  };
}