Nextra

Asktro provides an integration with Nextra (opens in a new tab). Follow this guide to get started integrating Asktro search with your Nextra documentation.

API key

Sign up (opens in a new tab) for an Asktro account and create a project.

• Include the name of your project. This can be anything and is only used to help you identify your project in Asktro.
• Include the URL of your documentation site. This is used to restrict search results to your documentation site. Note: you can also test from localhost.
• View your project and copy the upload API key and client API key for use below.

Nextra

If you haven't already, follow the Nextra guide to get started with the docs theme (opens in a new tab).

Install

Then, install the Asktro plugin and search.

npm i @asktro/nextra

Nextra configuration

Once installed, configure Nextra to use the Asktro plugin and search.

nextjs.config.js

Update the nextjs.config.js file in the root of the project to use the Asktro plugin. This will ingest data during production builds.

// Import the Asktro Nextra plugin.
const { withAsktro } = require("@asktro/nextra/dist/plugin");
 
// Standard Nextra configuration. Change as desired.
const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.js",
});
 
// Wrap the `withNextra` plugin with the `withAsktro` plugin.
module.exports = withAsktro({ apiKey: "replace_with_your_UPLAOD_api_key" })(
  withNextra({
    // Next.js configuration...
  }),
);

theme.config.js

Replace the default Nextra search component with the Asktro search component.

import { Search } from "@asktro/nextra";
 
export default {
  search: {
    component: () => <Search apiKey="replace_with_your_CLIENT_api_key" />,
  },
  // Other Nextra Docs Theme configuration...
};

_app.mdx

Import the styles for the Asktro UI search component.

import "@asktro/ui/dist/index.css";
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
 
}