// we'll need our configPromise from payload-config import configPromise from '@payload-config' // we'll also need getPayload from 'payload' import { getPayload } from 'payload' // React from 'react' import React from 'react' // and the Search component we created before import { Search } from '@/components/Search/Component' // I plan on rendering our search results as links to the documnets, so I'll also import the Link component from next/link import Link from 'next/link' // and since this is a page, we'll of course want to include some metadata import type { Metadata } from 'next/types' // let's start with a type called Args type Args = { // that will make sure our search parameters are a promise searchParams: Promise<{ // and the search parameter 'q' expects a string q: string }> } // we'll then export our default async function called Page({}) {}. in our function arguments, we'll include {searchParams:} and rename it to searchParamsPromise. we'll then assign our Args type to this export default async function Page({ searchParams: searchParamsPromise }: Args) { // let's store our query in a constant q, which we'll rename to query for clarity, destructured from awaiting our searchParamsPromise const { q: query } = await searchParamsPromise // then initialize payload to get ready for our query to the database const payload = await getPayload({ config: configPromise }) // now lets find our posts using a constant call posts and await payload.find({}) const posts = await payload.find({ // we'll set our collection to 'search-results', since that's what we changed our search collection's slug to collection: 'search-results', // we'll keep depth at 1 depth: 1, // and limit this to just 6 documents limit: 6, // we'll use the select option to minimize how much we get back from our search results. I'll get just what we want to search on select: { // we'll get title title: true, // excerpt excerpt: true, // the slug slug: true, // and our related doc doc: true, }, // I'll set pagination to false because it will reduce overhead if you don't need totalDocs pagination: false, // then we can setup our where query by first checking if ...(query exists) ...(query ? { // if it does, we'll return a where query where: { // which will use an or clause or: [ // to check if title has something like the query in it { title: { like: query } }, // we'll duplicate this twice, once for excerpt { excerpt: { like: query } }, // and another time for slug { slug: { like: query } }, ], }, } // if query doesn't exist, we'll return an empty object : {}), }) // now we can render our page content return (

Search

{/* we'll check if posts.totalDocs is greater than 0. */} {posts.totalDocs > 0 ? ( // if it is, we'll map through our posts.docs and pass in a callback function () => {} with doc as the function argument posts.docs.map((doc) => { // to keep things cleaner, we'll store our doc.doc.relationTo field in a constant called relationTo const relationTo = doc.doc.relationTo // then we'll create another constant called slug, which will check if the doc.slug is equal to home. if it is, we'll return a forward slash. if the slug is not home, we'll check if relationTo is equal to posts. if it is, we'll return `/posts/${doc.slug}`. otherwise, we'll just return `/${doc.slug}` const slug = doc.slug === 'home' ? '/' : relationTo === 'posts' ? `/posts/${doc.slug}` : `/${doc.slug}` // now we can return a link component, which we'll style in just a moment. we'll set the href attribute to slug, which can't be null. I'll need to include a key, which I can use doc.id for. and finally, the doc.title can be used as the link's text. // for styles, we'll include padding top and bottom of 2, padding left and right of 4, text-emerald-950, border, border-emerald-950, rounded-md and some hover styles, which include hover:text-emerald-50 and hover:bg-emerald-950 return {doc.title} }, )) : ( // if totalDocs is less than or equal to 0, then we can return that no results were found

No results found.

)}

) } // lastly, we'll export our generateMetadata() {} function. we'll assign the type Metadata to it and then return an object with a title. I'll just use `NLV Codes Example Search` as my title. export function generateMetadata(): Metadata { return { title: `NLV Codes Example Search`, } }

Tags