Table of Contents<\/strong><\/p>\n\n\n\n Before reading this article, you should have the following prerequisites checked off:<\/p>\n\n\n\n In order to follow along step by step, you need the following:<\/p>\n\n\n\n If you do not have that yet and do want to follow along step by step, you can clone down my demo here: <\/p>\n\n\n\n https:\/\/github.com\/Fran-A-Dev\/smart-search-with-app-router<\/a><\/p>\n\n\n\n If you need a WordPress install, you can use a free sandbox account on WP Engine\u2019s Headless Platform:<\/p>\n\n\n\n Build, deploy, and manage headless websites with the power of WordPress and the best of modern web development.<\/p>\n\n\n\n WP Engine Smart Search is an Add-on for WP Engine customers that improves search for headless and traditional WordPress applications. It is designed to improve search result relevancy, support advanced search query operators, and add support for advanced WordPress data types.<\/p>\n\n\n\n We will use its public API for this article.<\/p>\n\n\n\n Smart Search search is included in paid plans with WP Engine accounts.<\/p>\n\n\n\n Steps to install and activate the Smart Search plugin:<\/p>\n\n\n\n You should have this:<\/p>\n\n\n\n A content sync sends all pre-existing content on the WordPress site to WP Engine Smart Search for indexing. This ensures the plugin knows exactly what content exists so it can serve the best results to site users. Click on the \u201cIndex Now\u201d <\/em>button and this will Index your content. <\/p>\n\n\n\n Now that we have Smart Search installed, let\u2019s go ahead and configure it. For this article, we will use the default settings. In the WP admin sidebar, click on Smart Search will default to \u201cFull text\u201d <\/em>and \u201cStemming\u201d<\/em> for the search config. We will stick to these for this guide, but feel free to try the other options on your own. <\/p>\n\n\n\n Everything is installed and configured. We need to grab the environment variables we are going to use to communicate with Smart Search on our frontend. Navigate to Settings<\/em> in the Smart Search menu option and it will take you to this page:<\/p>\n\n\n\n The Access Token<\/strong> and URL<\/strong> in WP Engine\u2019s Smart Search<\/strong> plugin are essential credentials that enable communication between your WordPress site and the Smart Search service. <\/p>\n\n\n\n The URL<\/strong> points to the Smart Search API endpoint, which ships with a GraphQL interface. This interface allows you to query and manage indexed data with GraphQL. <\/p>\n\n\n\n The Access Token<\/strong> is used for secure authentication to ensure that only authorized requests interact with the search backend.<\/p>\n\n\n\n Save these two variables since we will need them in the next section.<\/p>\n\n\n\n If you followed along in the prerequisites section of this article, you should already have a Next.js frontend spun up with a dynamic route that displays a single post detail page from WordPress via its URI. The first thing we will need to do is import the necessary package dependencies. In your terminal, run the following command:<\/p>\n\n\n The packages we installed do the following:<\/p>\n\n\n\n Packages<\/strong>:<\/p>\n\n\n\n These packages will allow us to have our MDX files with nice, clean syntax highlighting and code blocks. It will also optimize our search UI experience. <\/p>\n\n\n\n The following step is to create a Once that is created, add these keys and values to it:<\/p>\n\n\n The access token and endpoints will allow our app to access our smart search and WordPress API’s.<\/p>\n\n\n\n We have our packages dependencies installed. Now, let\u2019s setup our Next.js project to support MDX and Webpack for our search plugin. <\/p>\n\n\n\n In the root of the project, you will find the \n
Prerequisites<\/strong><\/h2>\n\n\n\n
\n
\n
WP Engine Headless Platform<\/h2>\n\n\n\n
WP Engine Smart Search<\/h2>\n\n\n\n
Steps<\/h2>\n\n\n\n
Install and activate Smart Search<\/strong><\/h2>\n\n\n\n
\n
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcu4syltRzSEEPg-g1kwmn3APG5C-aHaMe0kk-iiQcw2FdEbw4rGehbXe7mhcc3VtoK2KgPJbtE9dfKfA18bAdf8ox1ybMPRPB2I1aCCAheYLtpqP2leeiNCWq18gfCf0IPFjc1jA?key=3m-9LI1ZF8LoJcX0sYilKkoD\")
Now that you have Smart Search activated in your WordPress backend, navigate to WP Engine Smart Search > Index data<\/code> and you should see this page:<\/p>\n\n\n\n![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdO-xZlYH--M8O4B7tDUR8Z9VvKoiyZ6lGieoVTd7DOMCTRk072y1yWahHe1r9zV7bHnXi5l4ozVr6C4haxEVwlJWHFST1ECI5KnV3AXIC0J9xz3DpDJkzJbyYmZjTirU--5kObBw?key=3m-9LI1ZF8LoJcX0sYilKkoD\")
Configure Smart Search<\/h3>\n\n\n\n
WP Engine Smart Search > Configuration<\/code>. You will see this page:<\/p>\n\n\n\n![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe-P1h5NecUmnb57TR1gv0-xfdnZcp7s0W9mPOwXquq2U5GeItUYW4xaL3sevVHHSaaVVDezcQUlVAou3eKraLVsYC1laPwkx0QIkrgFmO73b90uzAi3CG2atiIuml2eOicO0yOwQ?key=3m-9LI1ZF8LoJcX0sYilKkoD\")
Smart Search Environment Variables<\/h3>\n\n\n\n
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeTCB4pRXmzzW8A-kS7YqBzTo-DKHsU6qPftw57GzZeKkQr4OBsr6DR_G4ajsUnz4h5Jn_fIlqWJGMb0rcMjezF5JXuRJOfqkglqO1OxXKkPQmDpFy9IrAeuOtrJRDhwYwUnxm82A?key=3m-9LI1ZF8LoJcX0sYilKkoD\")
Configure Next.js and App Router<\/strong><\/h2>\n\n\n\n
<\/p>\n\n\n\nInstalling Dependencies<\/h3>\n\n\n\n
npm<\/span> i<\/span> downshift<\/span> lodash<\/span>.debounce<\/span> json5<\/span> @next<\/span>\/mdx shikiji-transformers next-secure-headers rehype-mdx-import-media rehype-pretty-code rehype-slug http-status-codes\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n
downshift<\/code>: Provides functionality for building autocomplete or dropdown experiences.<\/li>\n\n\n\nlodash.debounce<\/code>: A utility for debouncing functions.<\/li>\n\n\n\n@next\/mdx<\/code>: Allows you to use .mdx files in a Next.js project.<\/li>\n\n\n\nshikiji-transformers<\/code>: A collection of common transformers for shikiji<\/a>, which we will use for adding syntax highlighting to the code blocks on our documentation pages.<\/li>\n\n\n\nnext-secure-headers<\/code>: Helps secure Next.js apps by adding headers.<\/li>\n\n\n\nrehype-pretty-code<\/code>: Formats and highlights code blocks in markdown or MDX.<\/li>\n\n\n\nrehype-slug<\/code>: Adds IDs to headings in markdown or MDX for easier linking.<\/li>\n\n\n\nhttp-status-codes<\/code>: \u00a0Constants enumerating the HTTP status codes. Based on the\u00a0Java Apache HttpStatus API<\/a><\/li>\n<\/ul>\n\n\n\nEnvironment Variables<\/h3>\n\n\n\n
.env.local<\/code> folder at the root of the project so that we can add the environment variables necessary to our project.<\/p>\n\n\n\nNEXT_PUBLIC_GRAPHQL_ENDPOINT=https:\/\/your-wordpress-site.conm g<\/span>\n<\/span><\/span> \/graphql\n<\/span><\/span>\n<\/span><\/span>NEXT_PUBLIC_WORDPRESS_HOSTNAME=https:\/\/your-wordpress-site.com<\/span>\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>NEXT_PUBLIC_SEARCH_ENDPOINT=https:\/\/your-smartsearch-endpoint.uc.a.run.app\/graphql<\/span>\n<\/span><\/span>NEXT_SEARCH_ACCESS_TOKEN=your-access-token\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nThe
next.config.mjs<\/code> file<\/h3>\n\n\n\nnext.config.mjs<\/code> file and it should look like this:<\/p>\n\n\n\/\/ next.config.mjs<\/span>\n<\/span><\/span>\n<\/span><\/span>import<\/span> { env } from<\/span> \"node:process\"<\/span>;\n<\/span><\/span>import<\/span> createMDX from<\/span> \"@next\/mdx\"<\/span>;\n<\/span><\/span>import<\/span> { transformerNotationDiff } from<\/span> \"@shikijs\/transformers\"<\/span>;\n<\/span><\/span>import<\/span> { createSecureHeaders } from<\/span> \"next-secure-headers\"<\/span>;\n<\/span><\/span>import<\/span> rehypeMdxImportMedia from<\/span> \"rehype-mdx-import-media\"<\/span>;\n<\/span><\/span>import<\/span> { rehypePrettyCode } from<\/span> \"rehype-pretty-code\"<\/span>;\n<\/span><\/span>import<\/span> rehypeSlug from<\/span> \"rehype-slug\"<\/span>;\n<\/span><\/span>import<\/span> smartSearchPlugin from<\/span> \".\/lib\/smart-search-plugin.mjs\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>\/**<\/span>\n<\/span><\/span> * @type {import('next').NextConfig}<\/span>\n<\/span><\/span> *\/<\/span>\n<\/span><\/span>const<\/span> nextConfig = {\n<\/span><\/span> trailingSlash<\/span>: true<\/span>,\n<\/span><\/span> reactStrictMode<\/span>: true<\/span>,\n<\/span><\/span> pageExtensions<\/span>: [\"js\"<\/span>, \"jsx\"<\/span>, \"mdx\"<\/span>, \"ts\"<\/span>, \"tsx\"<\/span>],\n<\/span><\/span> sassOptions<\/span>: {\n<\/span><\/span> includePaths<\/span>: [\"node_modules\"<\/span>],\n<\/span><\/span> },\n<\/span><\/span> eslint<\/span>: {\n<\/span><\/span>