Next.js

App Router (Next.js 13+)

Server Component Layout

Initialize the provider in your root layout.

// app/layout.tsx
import { StringBootProvider } from '@stringboot/web-sdk/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.Node;
}) {
  return (
    <html lang="en">
      <body>
        <StringBootProvider
          apiToken={process.env.NEXT_PUBLIC_STRINGBOOT_TOKEN!}
          baseUrl="https://api.stringboot.com"
          defaultLanguage="en"
        >
          {children}
        </StringBootProvider>
      </body>
    </html>
  );
}

Client Components

Use hooks inside any Client Component marked with 'use client'.

// app/components/WelcomeSection.tsx
'use client';

import { useString, useLanguage } from '@stringboot/web-sdk/react';

export default function WelcomeSection() {
  const title = useString('welcome_title');
  const subtitle = useString('welcome_subtitle');
  const [lang, setLang] = useLanguage();

  return (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
      <button onClick={() => setLang(lang === 'en' ? 'es' : 'en')}>
        Switch Language
      </button>
    </section>
  );
}

Pages Router (Next.js 12-)

For older Next.js applications, initialize the SDK in _app.tsx.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useStringBoot } from '@stringboot/web-sdk/react';

function MyApp({ Component, pageProps }: AppProps) {
  const { initialized, error } = useStringBoot({
    apiToken: process.env.NEXT_PUBLIC_STRINGBOOT_TOKEN!,
    baseUrl: 'https://api.stringboot.com',
    defaultLanguage: 'en'
  });

  if (!initialized) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return <Component {...pageProps} />;
}

export default MyApp;

Environment Variables: Remember to start your environment variables with NEXT_PUBLIC_ if they need to be accessed on the client side.

Getting Started

Android SDK

iOS SDK

Web SDK

Dashboard

App Router (Next.js 13+)

Server Component Layout

Client Components

Pages Router (Next.js 12-)

​App Router (Next.js 13+)

​Server Component Layout

​Client Components

​Pages Router (Next.js 12-)

App Router (Next.js 13+)

Server Component Layout

Client Components

Pages Router (Next.js 12-)