Skip to content
Stringtale

Next.js - Pages router

Pages router

In order for Stringtale to work, a back-end server is required. The back-end handles the communication between your website and Stringtale. For Next.js we support both the App router and the (legacy) Pages router. If you use the App router, please check the App router documentation instead.

Manual implementation

To use Stringtale in your Next.js application with the pages router you can either use stringtale init from our CLI or execute the following steps manually.

  1. Install the @stringtale/next and @stringtale/react package in your project using your package manager.

    Terminal window
      npm install @stringtale/next @stringtale/react

  2. Create a new file <PROJECT_DIRECTORY>/pages/api/stringtale.ts and add the following content:

      import { setupRoute } from '@stringtale/next/server'
    

      export default setupRoute({
        apiKey: process.env.STRINGTALE_API_KEY!,
      })

  3. Add STRINGTALE_API_KEY to your .env.local file. This token can be obtained from the Stringtale Dashboard.

      STRINGTALE_API_KEY=YOUR_API_KEY

    For more information on how to obtain an API key, please refer to the obtaining an API key guide.

  4. Update your App component in <PROJECT_DIRECTORY>/pages/_app.tsx and wrap your app using <StringtaleProvider> as follows:

      import type { AppProps } from 'next/app'
      import { StringtaleProvider } from "@stringtale/react"
      import "@stringtale/react/styles.css"
    

      export default function MyApp({ Component, pageProps }: AppProps) {
        return (
          <StringtaleProvider>
            <Component {...pageProps} />
          </StringtaleProvider>
        )
      }

    For more information about customizing the App component see the NextJS documentation.

  5. You’re now ready to use Stringtale in your project. For more information on how to use Stringtale with React see our React documentation.