How to Integrate Elasticsearch With Next.js

"scripts": {
...
    "build": "next build",
    "postbuild": "node ./scripts/Elasticsearch.mjs",
    "start": "next start"
  },

import { Client } from '@elastic/Elasticsearch'
import fs from 'fs'
import path from 'path'
import dotenv from 'dotenv'
import matter from 'gray-matter'

//I needed the parent folder
const root = process.cwd().split().pop()
//connection to Elasticsearch
async function connectToElasticsearch() {
  //process.env is not available from this folder, since this is outside of the project
  //for this reason dotenv is used to resolve .env file
  const result = dotenv.config()
  if (
    !result.parsed.ESS_CLOUD_ID ||
    !result.parsed.ESS_CLOUD_USERNAME ||
    !result.parsed.ESS_CLOUD_PASSWORD
  ) {
    return 'ERR_ENV_NOT_DEFINED'
  }
  return new Client({
    cloud: {
      id: result.parsed.ESS_CLOUD_ID,
    },
    auth: {
      username: result.parsed.ESS_CLOUD_USERNAME,
      password: result.parsed.ESS_CLOUD_PASSWORD,
    },
  })
}
export function formatSlug(slug) {
  return slug.replace(/\.(mdx|md)/, '')
}
//content of the blog
async function getAllFilesFrontMatter(folder) {
  const prefixPaths = path.join(root, '_content', folder)
  const files = getDirectories(prefixPaths)
  const allFrontMatters = []
  files.forEach((file) => {
    const filename = file.slice(prefixPaths.length + 1).replace(/\\/g, '/')
    if (path.extname(filename) !== '.md' && path.extname(filename) !== '.mdx') return
    const source = fs.readFileSync(file, 'utf-8')
    const { data: frontmatter } = matter(source)
    if (!frontmatter.draft) {
      allFrontMatters.push({
        ...frontmatter,
        source: source, //includes content of the blog
        slug: formatSlug(filename),
        lastmod: frontmatter.lastmod ? new Date(frontmatter.lastmod).toISOString() : null,
      })
    }
  })
  return allFrontMatters
}
async function indexToES() {
  const allPosts = await getAllFilesFrontMatter('blog')
  const client = await connectToElasticsearch()
  try {
    for (const file of allPosts) {
      await client.index({
        index: 'devmuscle-blog-contents',
        body: {
          content: file.source, //Elasticsearch searches in here (in everything simply)
          //meta : ES is going to return only these fields
          //...so we also index these metadata
          //...to decrease reponse object size- no need the whole content as response-
          //which are enough for UI
          meta: {
            title: file.title,
            alt: file.alt,
            date: file.date,
            image: file.image,
            lastmod: file.lastmod,
            tags: file.tags,
            slug: file.slug,
            summary: file.summary,
          },
        },
      })
      await client.indices.refresh({ index: 'devmuscle-blog-contents' })
    }
  } catch (error) {}
}
indexToES()

import { Client } from '@elastic/Elasticsearch'
//connect to Elasticsearch
export async function connectToElasticsearch() {
  const ESS_CLOUD_ID = process.env.ESS_CLOUD_ID
  const ESS_CLOUD_USERNAME = process.env.ESS_CLOUD_USERNAME
  const ESS_CLOUD_PASSWORD = process.env.ESS_CLOUD_PASSWORD

  if (!ESS_CLOUD_ID || !ESS_CLOUD_USERNAME || !ESS_CLOUD_PASSWORD) {
    return 'ERR_ENV_NOT_DEFINED'
  }

  return new Client({
    cloud: {
      id: ESS_CLOUD_ID,
    },
    auth: {
      username: ESS_CLOUD_USERNAME,
      password: ESS_CLOUD_PASSWORD,
    },
  })
}

export default async function searchES(req, res) {
  try {
    const client = await connectToElasticsearch()
    let results = []
    const { body } = await client.search({
      index: 'devmuscle-blog-contents',
      body: {
        query: {
          match: {
            content: {
              query: req.body,
              operator: 'and',
              fuzziness: 'AUTO',
              prefix_length: 0,
              fuzzy_transpositions: false,
              minimum_should_match: '85%',
            },
          },
        },
      },
      _source_excludes: 'content', //no need to return the content of the file only need to metadata
    })
    let hits = body.hits.hits
    hits.forEach((item) => {
      results.push(item._source.meta)
    })
    return res.send(results)
  } catch (error) {
    return res.status(error.statusCode || 500).json({ error: error.message })
  }
}

/**
 *
 * fetch api to our endpoint ('api/Elasticsearch' acts like an endpoint)
 *
 */
const ListLayout = ({ posts, title, pagination }) => {
const [searchValue, setSearchValue] = useState('')
  const [filteredPosts, setFilteredPosts] = useState([])
  const [loading, setLoading] = useState(false)//add loading indicator for fetch states(pending to success)
  const [success, setSuccess] = useState(null)
  const query = useDebouncedValue(searchValue, 600)//not the typed value but-
                                                  //... the debounced value to send search term to es api

useEffect(() => {
    if (query) {
      setLoading(true)
      fetch('/api/Elasticsearch', {
        method: 'POST',
        headers: {
          Accept: 'application/json, text/plain, */*',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(query),
      }).then((res) =>
        res
          .json()
          .then((data) => {
            setSuccess(true)
            setFilteredPosts(data)
            setLoading(false)
          })
          .catch((err) => {
            open()
            //setAlertMessage(err.message)
            setSuccess(false)
            setLoading(false)
            setFilteredPosts(posts) //if there is error
          })
      )
    } else {
      setFilteredPosts(posts)//if no search string
    }
  }, [query])
  const handleChange = (e) => {
    setSearchValue(e.target.value)
  }
...
...
return(
<>
...
     <div className="relative flex items-center max-w-lg">
            <Search className="absolute top-4 left-2 text-gray-400 " />
            <Input
              aria-label="Search articles"
              className="pl-12"
              type="text"
              onChange={handleChange}
              placeholder="Search articles"
            />
          </div>
        </div>
</>
)
}