I have received an API response in a Next.js application, containing a field named data.description. This field consists of HTML content mixed with custom shortcode tags such as <Home/>, <Core/>, <Login/>, and <Logic/>. The shortcode tags correspond to React components that should be rendered accordingly.

Here's a simplified version of the response:

{
  "status": "success",
  "message": "API response received successfully",
  "data": {
    "apiName": "Testing",
    "version": "1.0",
    "description": "<header>\n <Home/>\n </header>\n <section>\n <Core />\n <article>\n <Logic />\n <p>\n Acme API offers a range of functionalities to empower your applications. Discover the main features below:\n </p>\n <ul>\n <li id='listItem1'>Endpoint 1: <code>/api/products</code> - Retrieve a list of available products.</li>\n <li id='listItem2'>Endpoint 2: <code>/api/products/{id}</code> - Get details of a specific product by ID.</li>\n <li id='listItem3'>Endpoint 3: <code>/api/orders</code> - Place a new order for your desired products.</li>\n </ul>\n </article>\n </section>\n <footer>\n <p>\n For a comprehensive guide and additional features, refer to our\n <Login />\n </p>\n </footer>"
  },
  "shortCode": "Home,Core,Login,Logic"
}

The primary objective is to parse HTML content and render shortcode tags as React components on the server-side, while retaining other HTML tags in their original form. Shortcode tags, such as <Home/>, <Core/>, <Login/>, and <Logic/>, should be interpreted as React components within the Next.js server-side rendering process. This approach ensures dynamic content rendering while maintaining the structural integrity and SEO-friendliness of the application.

Could someone please assist me in achieving this functionality? It's crucial that the rendering occurs on the server side to ensure optimal performance and SEO benefits. Any insights, code snippets, or recommendations would be greatly appreciated! Thank you!