Next.js Discord

Discord Forum

Nextra - Search REST API implementation

Unanswered
Bombay posted this in #help-forum
Open in Discord
Avatar
BombayOP
I'm currently working on a Nextra project where i store my documentation, from my understanding, Nextra uses Flexsearch (by default, i'm not using any custom search system) to perform searches.

My plan is to have a rest api such as mywiki/api/search?query=something that would return the URLs for the top 5 results. While i've successfully setup the api endpoint, i'm at a loss as to how to import the Flexsearch into my api. Once that is imported i belive it's as easy as calling index.search(query) but i cannot find any documentation anywhere on how to achieve that.

42 Replies

Avatar
BombayOP
@linesofcode
I'm using the default nextra search that i belive is Flexsearch
the search itself is working perfectly well within the wiki itself, i just want an api endpoint to get search results from
Avatar
linesofcode
One sec…
Let me read up on flex search
Avatar
BombayOP
In short, i just want to pass discord messages to it and return top 5 results within discord
i have all the steps covered, except on how to actually search 😅
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    await runMiddleware(req, res, cors);
    const { query } = req.query;

    if (req.method === 'GET') {
        if(!query) return res.status(400).json({ status: 'error', error: 'Query is required' });
        //search inside documentation using nextra
        const results = [query];
        
        
        res.status(200).json({ status: 'success', data: results });
    } else {
        res.status(405).json({ status: 'error', error: 'Method not allowed' });
    }
}
not much point in this code but ye, i need to import the flexsearch instance in here somehow
Avatar
linesofcode
when you say import flexsearch
is there an instance you've already created of it somewhere?
anyways the way I believe this would be done
Avatar
BombayOP
that is the whole root of the issue
nextra is a black box i have no clue where it initializes flexsearch
Avatar
linesofcode
is that you need to import/export an index containing your flexsearch data
Avatar
BombayOP
if i could get the flexsearch instance there would be no problem, the library is pretty easy to use
Avatar
linesofcode
__nextra_internal__.flexsearch
idk if this is directly relevant
but I would begin by searching through the nextra codebase and figuring out how they interact with flexsearch
Avatar
BombayOP
i don't see anything in the server side globalThis
Image
this config option may also be helpful
you may need to fork this repo even
and try to hack in a way to get a flexsearch reference
good luck figuring this out!
Avatar
BombayOP
@linesofcode i got something
this doesen't work globalThis.__nextra_internal__
but this does const __nextra_internal__ = globalThis[Symbol.for('__nextra_internal__')]
thanks for the tip, now to hunt if i can actually do something with it
Avatar
linesofcode
Nice!
no problem
if you figure this out, I'd love it if you could be ping me with the final solution 😄
i might have to do something similar at some point
Avatar
BombayOP
ye, digging into the nextra internal atm
Avatar
BombayOP
unfortunatelly i only found the flexsearch options, which is what was in your first finding
the key is probably in the second section of code you linked, but i have no clue how to grab that
Avatar
BombayOP
@linesofcode basically, all you would need to do is export this, but you'd need to hack the nextra source https://github.com/shuding/nextra/blob/bf2636a20a7b81a850476a549b73e1b6dc20c278/packages/nextra-theme-docs/src/components/flexsearch.tsx#L48
i haven't found a way to access it any other way
if only this comment was implemented lol // This can be global for better caching.
Avatar
BombayOP
@linesofcode as a closing to this, i basically had to reimplement the whole flexsearch api-side
Avatar
linesofcode
Ahhh
Avatar
fuma thinks joulev is rational
As I know, Nextra do this at client-side.
I had implemented a search for my framework: https://next-docs-zeta.vercel.app/api/search?query=hello
It is just built with Flexsearch, you can use it as a reference (the project is open source)
Nextra actually do:
1. They first compile all mdx files, extract headings, text and store it in cache (under .next folder)
2. Load documents in [Flexsearch](https://github.com/shuding/nextra/blob/main/packages/nextra-theme-docs/src/components/flexsearch.tsx) component
Avatar
BombayOP
Ye this is what I ended up doing