Next.js Integration

Integrate Ask0's AI search and chat into your Next.js app with React component or script tag. Full TypeScript support.

Integrate Ask0 into your Next.js application with support for both App Router and Pages Router.

App Router (Next.js 13+)

Root Layout Integration

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://assets.ask0.ai/scripts/ask.js"
          strategy="afterInteractive"
          data-project-id={process.env.NEXT_PUBLIC_ASK0_PROJECT_ID}
          data-position="bottom-right"
          data-theme="auto"
        />
      </body>
    </html>
  );
}

Client Component

components/ask0-widget.tsx

'use client';

import { useEffect } from 'react';
import { useTheme } from 'next-themes';

export function Ask0Widget() {
  const { theme } = useTheme();

  useEffect(() => {
    if (window.ask0 && theme) {
      window.ask0.setTheme(theme as 'light' | 'dark');
    }
  }, [theme]);

  return null;
}

Pages Router

_app.tsx Integration

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
        src="https://assets.ask0.ai/scripts/ask.js"
        strategy="afterInteractive"
        data-project-id={process.env.NEXT_PUBLIC_ASK0_PROJECT_ID}
      />
    </>
  );
}

User Identification

With NextAuth

import { useSession } from 'next-auth/react';
import { useEffect } from 'react';

export function Ask0UserSync() {
  const { data: session } = useSession();

  useEffect(() => {
    if (session?.user && window.ask0) {
      window.ask0.identify({
        id: session.user.id,
        email: session.user.email,
        name: session.user.name,
      });
    }
  }, [session]);

  return null;
}

API Routes

Create API Endpoint

app/api/ask0/route.ts

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const body = await request.json();

  // Handle Ask0 webhook or API calls
  return NextResponse.json({ success: true });
}

Server Components

app/support/page.tsx

import { Ask0TriggerButton } from '@/components/ask0-trigger';

export default function SupportPage() {
  return (
    <div>
      <h1>Support</h1>
      <p>Need help? Click below:</p>
      <Ask0TriggerButton />
    </div>
  );
}

Environment Variables

.env.local

NEXT_PUBLIC_ASK0_PROJECT_ID=your_project_id

Middleware Integration

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Add Ask0 config to response headers if needed
  response.headers.set('x-ask0-enabled', 'true');

  return response;
}

Next.js Tips:

Use Script component with strategy="afterInteractive"
Store project ID in environment variables
Sync theme with next-themes if using
Identify users with NextAuth session
Use client components for interactive features