How to use Algolia Search ?

[The-Real-Thisas]

Situation

So I have nexta set up the way I like it but the issue is I want to change the default search to alogia but I can't seem to do that.

Problem

There are two sub problems to this :

• There is an option in the theme.config.js that you can toggle to supposedly use a custom search.

  export default {
  repository: 'https://github.com/shuding/nextra', // project repo
  docsRepository: 'https://github.com/shuding/nextra', // docs repo
  branch: 'master', // branch of docs
  path: '/', // path of docs
  titleSuffix: ' – Nextra',
  nextLinks: true,
  prevLinks: true,
  search: true,
  customSearch: null, // customizable, you can use algolia for example
  darkMode: true,
  footer: true,
  footerText: 'MIT 2020 © Shu Ding.',
  footerEditOnGitHubLink: true, // will link to the docs repo
  logo: <>
  <svg>...</svg>
  <span>Next.js Static Site Generator</span>
  </>,
  head: <>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Nextra: the next docs builder" />
  <meta name="og:title" content="Nextra: the next docs builder" />
  </>
  }

  When you change customSearch to true then the search bar just disappears and is nowhere to be seen. I need this to be an input field that can be mapped to algoila.

• The second problem is with the javascript script tag I need to have as part of frontend.

<!-- at the end of the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
apiKey: 'CENSORED',
indexName: 'igcse-chem',
inputSelector: 'INPUT-FEILD,
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>

Here the first issue is getting the body script to work since adding this to theme.config.js it doesn't work as } causes an error to occurs. Further, I have no clue how I'm supposed to link the input field via the 'inputSelector' variable.

[shuding]

customSearch should be a React Component, not true/false.

So you need a docsearch.js file like this: https://github.com/vercel/swr-site/blob/88d1b8affa7f1c344f3aaba229b51867b2cedc8d/components/docsearch.js (modify the API key), and then import it inside your theme:

import Docsearch from './docsearch'

...
customSearch: <Docsearch/>,

The script needs to be included in pages/_document.js like https://github.com/vercel/swr-site/blob/88d1b8affa7f1c344f3aaba229b51867b2cedc8d/pages/_document.js.

[shuding]

I think we should add an example for Algolia. For now please check https://github.com/vercel/swr-site/tree/88d1b8affa7f1c344f3aaba229b51867b2cedc8d (not latest master) for reference.

[The-Real-Thisas]

I have a bit of an issue with this.

error - ./theme.config.js:1:0
Module not found: Can't resolve './docsearch'
> 1 | import Docsearch from './docsearch'
  2 |
  3 | export default {
  4 |   repository: 'https://github.com/The-Real-Thisas/igcse-chem',

I have a _docsearch.js file in pages/_docsearch.js and I have my theme.config.js set to

import Docsearch from './docsearch'

export default {
  repository: 'https://github.com/The-Real-Thisas/igcse-chem',
  docsRepository: 'https://github.com/The-Real-Thisas/igcse-chem',
  titleSuffix: ' – IGCSE Chem',
  logo: (
    <>
      <span className="mr-2 font-extrabold hidden md:inline">IGCSE</span>
      <span className="text-gray-600 font-normal hidden md:inline">
        Chemistry
      </span>
    </>
  ),
  head: (
    <>
      <meta name="og:title" content="IGCSE | Chemistry" />
      <meta name="og:image" content="https://igcse-chem.vercel.app/demo.png" />
    </>
  ),
  search: true,
  customSearch: <Docsearch/>,
  prevLinks: true,
  nextLinks: true,
  footer: true,
  footerEditOnGitHubLink: true,
  footerText: <>MIT {new Date().getFullYear()} © Thisas.</>
}

It appears to be a problem with importing the docsearch file but I don't know why.

Also, thank you so much for the reply. I really appreciate it.