Render General Link With Search Field in Sitecore JSS

With Sitecore JSS, we use Layout Service which as we know is a API which exposes the data we have stored in the CM & outputs in JSON which then we consume using JS frameworks/libraries (Angular, Next,Vue, React). It turns out that Layout Service by default doesn't serialize General Link With Search field even though it does serialize General Link field. So if we have any template where we are using General Link With Search as a field type, then that particular field's data is not rendered by default by the Layout Service which in turn means that field's value is not visible either in Sitecore Experience Editor, nor on the front end after publishing.

As you can see in the screenshot of the showconfig.aspx attached, even though the Layout Service serializes General Link field, it doesn't serialize General Link With Search Field :

To resolve this, we have to manually add the config file which will serialize General Link With Search Field & patch it to the Sitecore Layout Service pipeline :

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
	<sitecore>
		<pipelines>
			<group groupName="layoutService">
				<pipelines>
					<getFieldSerializer>
		<processor type="Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer.GetGeneralLinkFieldSerializer, Sitecore.LayoutService" resolve="true">
							<FieldTypes hint="list">
								<fieldType id="2">general link with search</fieldType>
							</FieldTypes>
						</processor>
					</getFieldSerializer>
				</pipelines>
			</group>
		</pipelines>
	</sitecore>
</configuration>

After applying the patch, now the Sitecore Layout Service Pipeline should include the General Link With Search Field which we serialized with our custom config file as follows:

That's it. Now you can create the JSS component. I have used NextJS :

import { ComponentRendering, Link, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';

export type GeneralLinkWithSearchProps = {
  fields: { Link: LinkField }
};

const Button = ({ rendering, fields }: GeneralLinkWithSearch): JSX.Element => {

  const linkFieldValue = fields?.Link;
  const btnClass = `btn ${linkFieldValue.value.class}`;

  return (
    <>
        <Link field={linkFieldValue} className={btnClass} />
    </>
  );
};

export default GeneralLinkWithSearch;

Next, you can create the JSON rendering. As we know for JSON rendering, name of the rendering should match the name of the JSS component which we just created :

Now, you can apply this rendering on Presentation Details of any Sitecore item where you need to use this field. That's it, your field should be visible now both in Experience Editor as well as on frontend.