Next.js - 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 packages in your project using your package manager.

   npm

     npm install @stringtale/next @stringtale/react

   Yarn

     # If you're using a monorepo with workspaces, add it to the right workspace
     yarn add @stringtale/next @stringtale/react

   pnpm

     pnpm install @stringtale/next @stringtale/react

2. Create a new file pages/api/stringtale.ts (or src/pages/api/stringtale.ts) and add the following content:

     import { setupRoute } from "@stringtale/next"
   
     export default setupRoute({
       apiKey: process.env.STRINGTALE_API_KEY!,
     })

3. Add STRINGTALE_API_KEY to your .env.local file. This API key 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 pages/_app.tsx and wrap your app using <StringtaleProvider> as follows:

   Tip

   To enable additional Stringtale features, check out the StringtaleProvider documentation.

     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 Next.js 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.