Next.js

Setup

1. Install the package:

   npm install aeo.js

2. Wrap your Next.js config with withAeo:

   next.config.mjs

   import { withAeo } from 'aeo.js/next';
   
   export default withAeo({
     aeo: {
       title: 'My Site',
       description: 'A site optimized for AI discovery',
       url: 'https://mysite.com',
     },
   });

3. Add the post-build step to your package.json:

   {
     "scripts": {
       "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\""
     }
   }

Tip

The postbuild step is needed because Next.js pre-renders pages during build. The post-build step scans the rendered HTML to extract full page content.

Widget

For Next.js, add the widget manually as a client component:

// app/layout.tsx (or any client component)
'use client';
import { useEffect } from 'react';

export function AeoWidgetLoader() {
  useEffect(() => {
    import('aeo.js/widget').then(({ AeoWidget }) => {
      new AeoWidget({
        config: {
          title: 'My Site',
          url: 'https://mysite.com',
          widget: { enabled: true, position: 'bottom-right' },
        },
      });
    });
  }, []);
  return null;
}

Configuration

Pass any AeoConfig options in the aeo key:

export default withAeo({
  aeo: {
    title: 'My Site',
    url: 'https://mysite.com',
    generators: {
      robotsTxt: true,
      llmsTxt: true,
      schema: true,
    },
    widget: {
      enabled: true,
      position: 'bottom-right',
    },
  },
});