Adding LocalBusiness Schema to a Next.js App Router Site Without Breaking Anything

If you operate a business that serves customers in a specific location, adding structured data to your website can improve its visibility in search results. This process is relatively simple and can be accomplished without negatively impacting the existing functionality of a Next.js App Router site.

To begin, create a centralized source file that stores all relevant business information. This file should be typed to ensure consistency and prevent errors. For example, define an interface for opening hours and another for the business object itself. Populate this file with the necessary details such as the business name, URL, logo, phone number, email, price range, service areas, and opening hours.

Next, create a helper function to generate the JSON-LD schema. This function takes the business data as input and constructs the JSON-LD object based on predefined types and properties. By using a specific subtype like 'Plumber' instead of the generic 'LocalBusiness', you provide search engines with more detailed information about the nature of the business.

Include the stable '@id' property to link related schema blocks across different pages. For service areas, only include the relevant city or region rather than a full physical address, if applicable.

Finally, render the JSON-LD schema on the server-side within a small server component in the App Router. This component should output a script tag containing the JSON-LD object, ensuring that search engine crawlers can easily access and understand the structured data. By following these steps, you can effectively implement LocalBusiness schema markup in a Next.js App Router project without disrupting the existing site structure or compromising performance.