Skip to content
Stringtale

Next.js - App router

App 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 (legacy) Pages router, please check the Pages router documentation instead.

Manual implementation

To use Stringtale in your Next.js application with the app 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 app/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. Add <StringtaleProvider> and Stringtale’s CSS to your RootLayout in app/layout.tsx as such:

     import { StringtaleProvider } from "@stringtale/next"
     import "@stringtale/react/styles.css"
    

     export default async function RootLayout({
       children,
     }: {
       children: React.ReactNode
     }) {
       return (
         <html>
           <body>
             <StringtaleProvider>{children}</StringtaleProvider>
           </body>
         </html>
       )
     }

    For more information about RootLayout 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.