How to Add an AI Chatbot to Next.js
Next.js is the most popular React framework for production websites. With Tuqlas, you can add a fully managed AI chatbot to any Next.js app using the built-in Script component — no API keys or model configuration required.
- Under 60 seconds
- Zero dependencies
- No build step
01
Create a chatbot on Tuqlas
Sign up at tuqlas.com, create a chatbot from the dashboard, and copy your embed key.
02
Add the Script component
In your root layout (app/layout.tsx), import Script from next/script and add the Tuqlas embed snippet with the afterInteractive strategy.
03
Deploy
Push your changes. The chat widget appears automatically on every page of your Next.js app.
app/layout.tsx
import Script from "next/script"
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://tuqlas.com/chatbot.js"
data-key="tq_live_xxxxxxxxxxxx"
strategy="afterInteractive"
/>
</body>
</html>
)
}💡 Tip
The afterInteractive strategy ensures the chatbot loads after the page is interactive, so it won't affect your Core Web Vitals.