Next.js Integration
AI support widget optimized for Next.js
Next.js is the most popular React framework. LaunchChat integrates seamlessly using next/script with optimal loading strategies. Works with App Router, Pages Router, and static exports.
IntegrationPage.whyAddChatbot
Next.js by Vercel is the leading React framework for production. Its script loading strategies (afterInteractive, lazyOnload) are perfect for embedding LaunchChat with zero impact on page performance. The widget works in SSR, SSG, and ISR modes.
IntegrationPage.features
App Router & Pages Router
Works with both Next.js routing paradigms. Add to your root layout (App Router) or _app.tsx (Pages Router). One setup covers all routes.
Optimal script loading
Use next/script's afterInteractive strategy for optimal loading. The widget initializes after page hydration — no blocking the initial render.
SSR/SSG/ISR compatible
LaunchChat works in all Next.js rendering modes. The widget is client-side only and doesn't interfere with server-side rendering or static generation.
Static export friendly
Works with next export / output: 'export'. The widget loads from an external script, so it's compatible with fully static Next.js deployments.
IntegrationPage.whyChooseLaunchChat
- Works with App Router, Pages Router, and static exports
- next/script integration for optimal loading performance
- Compatible with SSR, SSG, and ISR rendering modes
- No impact on Core Web Vitals or Lighthouse scores
IntegrationPage.howToAdd
Get your widget ID
Create a free LaunchChat account, connect your data sources, and copy your widget ID from the dashboard.
Add to your root layout
For App Router: add to app/layout.tsx using next/script. For Pages Router: add to pages/_app.tsx. One setup covers all routes.
Configure and deploy
Set your widget config and deploy. The widget loads after page hydration with zero impact on your build output.
Monitor in production
Track conversations, deflection rates, and knowledge gaps from the LaunchChat dashboard. Improve your docs to increase coverage over time.
IntegrationPage.embedCode
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<Script id="launchchat-config" strategy="afterInteractive">
{`window.NotionSupportConfig = {
widgetId: 'YOUR_WIDGET_ID',
primaryColor: '#0D9488'
};`}
</Script>
<Script
src="https://launchchat.dev/widget.js"
strategy="afterInteractive"
/>
</body>
</html>
);
}App Router integration in root layout. Widget loads after hydration on all routes.
// pages/_app.tsx
import Script from 'next/script';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script id="launchchat-config" strategy="afterInteractive">
{`window.NotionSupportConfig = { widgetId: 'YOUR_WIDGET_ID' };`}
</Script>
<Script
src="https://launchchat.dev/widget.js"
strategy="afterInteractive"
/>
</>
);
}Pages Router integration in _app.tsx. Same next/script approach, applies to all pages.
// app/layout.tsx — using env variable
<Script id="launchchat-config" strategy="afterInteractive">
{`window.NotionSupportConfig = {
widgetId: '${process.env.NEXT_PUBLIC_LAUNCHCHAT_WIDGET_ID}'
};`}
</Script>
<Script
src="https://launchchat.dev/widget.js"
strategy="afterInteractive"
/>Best practice: store your widget ID in an environment variable. Add NEXT_PUBLIC_LAUNCHCHAT_WIDGET_ID to your .env.local.
IntegrationPage.faq
Does LaunchChat work with Next.js App Router?
Yes. Add the widget to your app/layout.tsx using next/script. The afterInteractive strategy ensures the widget loads after page hydration without blocking the initial render. One setup covers all routes.
Does it work with Pages Router too?
Yes. Add the widget to pages/_app.tsx using next/script. The same approach works for both App Router and Pages Router.
Does it work with static exports?
Yes. LaunchChat loads from an external script, so it's compatible with fully static Next.js deployments (output: 'export'). The widget initializes client-side after the static HTML loads.
Will it affect my Core Web Vitals?
No. Using next/script with afterInteractive strategy, the widget loads after the page becomes interactive. At 3KB gzipped, it won't impact your LCP, FID, or CLS scores.
Can I use environment variables for the widget ID?
Yes. Store your widget ID in NEXT_PUBLIC_LAUNCHCHAT_WIDGET_ID and reference it in your layout. This is the recommended approach for production deployments.
Does it work with Next.js middleware?
Yes. LaunchChat is client-side only and doesn't interact with Next.js middleware. You can conditionally include the widget script based on middleware logic if needed.