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.
-
Install the
@stringtale/next
and@stringtale/react
package in your project using your package manager.Terminal window npm install @stringtale/next @stringtale/reactTerminal window # If you're using a monorepo with workspaces, add it to the right workspaceyarn add @stringtale/next @stringtale/reactTerminal window pnpm install @stringtale/next @stringtale/react -
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!,}) -
Add
STRINGTALE_API_KEY
to your.env.local
file. This token can be obtained from the Stringtale Dashboard.STRINGTALE_API_KEY=YOUR_API_KEYFor more information on how to obtain an API key, please refer to the obtaining an API key guide.
-
Add
<StringtaleProvider>
and Stringtale’s CSS to yourRootLayout
inapp/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.
-
You’re now ready to use Stringtale in your project. For more information on how to use Stringtale with React see our React documentation.