You start a blog or marketing website, and over time, the content grows, and the project becomes successful. You are probably lucky that one of your posts goes viral and a lot of traffic hits your page. Your visitors want to know more about your project and valuable content.
It’s time for a solution that is easy to integrate and lightning-fast so everybody can find what it’s searching for.
In my previous post, I provided a complete how-to that guides you through the synchronization process from Contentful to Algolia. Aloglia offers 10k Search Requests/Month and 1m records on the free plan, which is a lot for new projects. If these limits are insufficient and you need more, you can choose the pay-as-you-go solution or something different.
Here you can already spoiler the final page -> https://nextjs14-algolia-search.vercel.app/
In the previous post, we already added our new Algolia Env-Variables to .env.local
Needed Env variables
New NPM packages
Now, we go ahead with the installation of new NPM packages
We also did some work on TailwindCss and removed the NPM package “@contentful/f36-tokens” because, since version 3 of TailwindCSS, a rich palette of default colors has already been included in the main package.
Here is the complete overview regarding the default color palette from the Tailwind website.
We already installed the contentful NPM package “@contentful/rich-text-plain-text-renderer” because we needed it for the content sync between Contentful and Algolia, as shown in the previous post.
Now, we will adapt the layout.tsx file under src/app/[locale]. Below is the new code. We added “instantsearch.css/themes/satellite-min.css” in the import section, and we will pass a second prop, “showBar={true},” to the header component.
Modifying Layout.tsx
New Search Component
Before adopting the header component, we must add our new search component (Search bar), “search.component.tsx,” in our components subfolder “header.”
GitHub Repo
As always, you will find the complete code in my Github-Repo -> https://github.com/cloudapp-dev/nextjs14-SEO/tree/nextjs14-part7
In the header component, we add a new import and a new interface
and we add the new “search” component.
We will add these components to our new search pages, so we must create our new search components in “src/components/search,” which represents a new folder under components.
Adding translations to common.json files
and we have to add new translations in the common.json files for the multi-language-handling under src/app/i18n/locales/de-DE/
and for “en-US”
We also need a new route because we must fetch the tags from the Algolia Index to show them in the “tag cloud” on the search result page.
New Route for Getting Algolia Facets
Therefore, let’s create a new route under src/app/api/search/facets/route.ts
Since we need a new ArticleLabel Component within the new card.component.tsx on the search result page, we have to add this component under src/components/contentful/ArticleLabel.tsx.
Screenshot, which shows the Tag/Tags in the TagCloud
New Next.js 14 pages
As a last step, we add the new “search” and “searchalgolia” pages under src/app/[locale]/search/[searchTerm]
and src/app/[locale]/searchalgolia
If we want to use attributes for the “Algolia Snippet Component” in algoliasearch.component.tsx
we have to enable those attributes in the Algolia Index Configuration
Last, we must enable the facets where we use our tags as a foundation.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
Please consider clapping and following the writer! 👏 on our Medium Account
