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.

   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 <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:

   Caution

   Important: When using the pages router, you must import the StringtaleProvider from @stringtale/react or certain features such as login will break.

     import type { AppProps } from 'next/app'
     // When using pages router, make sure to import
     // from @stringtale/react, not @stringtale/next
     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.