Schema markup Prismic Next js - markup with multiples paragraphs (e.g FAQ)

[Marving (Marving Moreton)]

Hello,

I am trying to implement different kind of structured data on dynamic pages such as blog post and pillar page which would contain FAQ.

I am using a method provided in the Next Js Documentation (Metadata - Rendering and Ranking | Learn Next.js) which is fine for small structured data such as organization and logo, but it is not for FAQ.

Indeed, the script is well displayed in the HTML code. However, it is creating multiples errors such as "Duplicate field "text" and custom type property which are not valid. (see screenshots attached)

Is there a way to smoothly implement data structured containing multiples paragraphs on Prismic's repeatable custom type/slices?

I have tried to add a preformatted Rich Text Field to the slice as suggested here, in vain.

Here the code for the FAQ slice:

import * as React from "react";
import Head from "next/head";

import { PrismicRichText } from "@prismicio/react";
import classes from "../../components/ui/Shared/Faq.module.css";

import { styled } from "@mui/material/styles";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import StructuredData from "../../components/seo/StructuredData";
import Script from "next/script";

/**
 * @typedef {import("@prismicio/client").Content.FaqSlice} FaqSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<FaqSlice>} FaqProps
 * @param { FaqProps }
 */

const Accordion = styled((props) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&:before": {
    display: "none",
  },
}));

const AccordionSummary = styled((props) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor:
    theme.palette.mode === "dark"
      ? "rgba(255, 255, 255, .05)"
      : "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

export default function CustomizedAccordions({ slice }) {
  // const Faq = ({ slice }) => (
  const [expanded, setExpanded] = React.useState("panel1");

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };


  const SliceStructuredData = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: [
      {
        "@type": "Question",
        name: slice.primary.question1,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_1,
        },
      },
      {
        "@type": "Question",
        name: slice.primary.question_2,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_2,
        },
      },
      {
        "@type": "Question",
        name: slice.primary.question_3,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_3,
        },
      },
      {
        "@type": "Question",
        name: slice.primary.question_4,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_4,
        },
      },
      {
        "@type": "Question",
        name: slice.primary.question_5,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_5,
        },
      },
      {
        "@type": "Question",
        name: slice.primary.question_6,
        acceptedAnswer: {
          "@type": "Answer",
          text: slice.primary.response_6,
        },
      },
    ],
  };

  return (
    <React.Fragment>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(SliceStructuredData, null, "\t"),
          }}
          key="faq-jsonld"
        />

    
      </Head>

      <section className={classes["section-faq"]}>
        <div className={classes["grid-faq"]}>
          <PrismicRichText field={slice.primary.title} />
          <div className={classes["box-faq"]}>
            <div className={classes["box-text"]}>
              {slice.items.map((item, i) => (
                <PrismicRichText field={item.paragraph} key={i} />
              ))}
            </div>
            <div className={classes["box-accordion"]}>
              <Accordion
                expanded={expanded === "panel1"}
                onChange={handleChange("panel1")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel1d-content"
                  id="panel1d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question1} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_1} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel2"}
                onChange={handleChange("panel2")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel2d-content"
                  id="panel2d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_2} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_2} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel3"}
                onChange={handleChange("panel3")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_3} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_3} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel4"}
                onChange={handleChange("panel4")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_4} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_4} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel5"}
                onChange={handleChange("panel5")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_5} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_5} />
                  </Typography>
                </AccordionDetails>
              </Accordion>

              {slice.primary.question_6 && (
                <Accordion
                  expanded={expanded === "panel6"}
                  onChange={handleChange("panel6")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_6} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_6} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )}

              {/* {slice.primary.question_7.empty && (
                <Accordion
                  expanded={expanded === "panel7"}
                  onChange={handleChange("panel7")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_7} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_7} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )}
              {slice.primary.question_8.empty && (
                <Accordion
                  expanded={expanded === "panel8"}
                  onChange={handleChange("panel8")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_8} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_8} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )} */}
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// export default Faq;

Thank you for the help!

[Pau]

Hello @Marving, here's a short guide about using markup with Prismic.

How to add schema markup in Prismic

Schema markup is a standard for structuring data in web pages, it helps you improve your website's SEO and help search engines crawl and display your site on their results page. The official website schema.org contains a vast collection of documents that explain how this semantic vocabulary can help you improve your website's SEO and thereby your pages' positions in search engine results. 1. Get your structured data Schemas come in different shapes, but the final format you'll need to add to…

[Marving (Marving Moreton)]

Hello @Pau,

Thank you for your reply.

So I have tried to follow the process, and multiples various, in vain.

if I insert the script directly in the editor like that:

It will be visibile in the front right before the html:

I have tried wrapping the richtext in a script in the code, not working neither.

Similar to this thread Error in the docs related to Structured Data? , my best output so far include using dangerouslySetInnerHTML but the input format is wrong:

Here's the code

import * as React from "react";
import Head from "next/head";

import { PrismicRichText } from "@prismicio/react";
import classes from "../../components/ui/Shared/Faq.module.css";

import { styled } from "@mui/material/styles";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import StructuredData from "../../components/seo/StructuredData";
import Script from "next/script";

/**
 * @typedef {import("@prismicio/client").Content.FaqSlice} FaqSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<FaqSlice>} FaqProps
 * @param { FaqProps }
 */

const Accordion = styled((props) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&:before": {
    display: "none",
  },
}));

const AccordionSummary = styled((props) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor:
    theme.palette.mode === "dark"
      ? "rgba(255, 255, 255, .05)"
      : "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

export default function CustomizedAccordions({ slice }) {
  const [expanded, setExpanded] = React.useState("panel1");

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };


  const data = slice.primary.schema_script;

  function structuredDataXyz() {
    return {
      __html: `${(<PrismicRichText field={slice.primary.schema_script} />)}`,
    };
  }

  

  return (
    <React.Fragment>
      <Head>
     
        {/* PRISMIC TEST - NOT WORKING*/}
        {/* <PrismicRichText field={slice.primary.schema_script} /> */}

				{/* PRISMIC TEST - NOT WORKING*/}
        {/* <script type="application/ld+json">
          <PrismicRichText field={slice.primary.schema_script} />
        </script> */}

        {/* This version is almost working */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(data),
          }}
          key="structured-data"
        />
      </Head>

      <section className={classes["section-faq"]}>
        <div className={classes["grid-faq"]}>
          <PrismicRichText field={slice.primary.title} />
          <div className={classes["box-faq"]}>
            <div className={classes["box-text"]}>
              {slice.items.map((item, i) => (
                <PrismicRichText field={item.paragraph} key={i} />
              ))}
            </div>
            <div className={classes["box-accordion"]}>
              <Accordion
                expanded={expanded === "panel1"}
                onChange={handleChange("panel1")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel1d-content"
                  id="panel1d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question1} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_1} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel2"}
                onChange={handleChange("panel2")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel2d-content"
                  id="panel2d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_2} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_2} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel3"}
                onChange={handleChange("panel3")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_3} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_3} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel4"}
                onChange={handleChange("panel4")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_4} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_4} />
                  </Typography>
                </AccordionDetails>
              </Accordion>
              <Accordion
                expanded={expanded === "panel5"}
                onChange={handleChange("panel5")}
                className={classes["border-radius"]}
              >
                <AccordionSummary
                  aria-controls="panel3d-content"
                  id="panel3d-header"
                  className={classes["card-accordion"]}
                >
                  <Typography
                    className={classes.question}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.question_5} />
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography
                    className={classes.answer}
                    component={"span"}
                    variant={"body2"}
                  >
                    <PrismicRichText field={slice.primary.response_5} />
                  </Typography>
                </AccordionDetails>
              </Accordion>

              {slice.primary.question_6 && (
                <Accordion
                  expanded={expanded === "panel6"}
                  onChange={handleChange("panel6")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_6} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_6} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )}

              {/* {slice.primary.question_7.empty && (
                <Accordion
                  expanded={expanded === "panel7"}
                  onChange={handleChange("panel7")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_7} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_7} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )}
              {slice.primary.question_8.empty && (
                <Accordion
                  expanded={expanded === "panel8"}
                  onChange={handleChange("panel8")}
                  className={classes["border-radius"]}
                >
                  <AccordionSummary
                    aria-controls="panel3d-content"
                    id="panel3d-header"
                    className={classes["card-accordion"]}
                  >
                    <Typography
                      className={classes.question}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.question_8} />
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <Typography
                      className={classes.answer}
                      component={"span"}
                      variant={"body2"}
                    >
                      <PrismicRichText field={slice.primary.response_8} />
                    </Typography>
                  </AccordionDetails>
                </Accordion>
              )} */}
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// export default Faq;

[Marving (Marving Moreton)]

[UPDATED SOLUTION]

First of all, I have seen new documentation section about structured data in Next js: Use Schema.org with Next.js - Documentation - Prismic

That's great!

On my hand, I have twisted a bit the documentation to make it work:

1. I have created a component named StructuredData:

import Head from 'next/head';
import Script from "next/script";

export default function StructuredData({ data }) {
  return (
    <Script
        id="app-ld-json"
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(data, null, "\t"),
        }}
      />

  );
}

2. Then I import this component in the targeted custom type:

import StructuredData from "../components/seo/StructuredData";

3. I create a variable named schema that render the markup:

 // Custom version
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: page.data.questions.map((question) => ({
      "@type": "Question",
      name: prismicH.asText(question.question),
      acceptedAnswer: prismicH.asText(question.answer),
    })),
  };

4. Then in the return section of the custom type, i pass the schema const to the StructuredData Component, here's the full code of the custom type:

import React from "react";
import Head from "next/head";

import Hero from "../components/ui/PillarPages/Hero";

import { SliceZone } from "@prismicio/react";
import * as prismicH from "@prismicio/helpers";

import { createClient } from "../prismicio";
import { components } from "../slices";
import { useRouter } from "next/router";
import StructuredData from "../components/seo/StructuredData";

// FAQ structured data to be done

const Page = ({
  metaTitle,
  metaDescription,
  ogImage,
  page,
  title,
  upperTitle,
  description,
}) => {
  const router = useRouter();
  const currentRoute = router.pathname;

  // Custom version
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: page.data.questions.map((question) => ({
      "@type": "Question",
      name: prismicH.asText(question.question),
      acceptedAnswer: prismicH.asText(question.answer),
    })),
  };

  return (
    <React.Fragment>
      <StructuredData data={schema} />

      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
        {/* <!-- Twitter Card data --> */}
        <meta name="twitter:card" content="summary" />
        {/* <meta name="twitter:site" content="@publisher_handle" /> */}
        <meta name="twitter:title" content={metaTitle} />
        <meta name="twitter:description" content={metaDescription} />
        {/* <meta name="twitter:creator" content="@author_handle" /> */}
        {/* <-- Twitter Summary card images must be at least 120x120px --> */}
        {ogImage && <meta name="twitter:image" content={ogImage} />}

        {/* <!-- Open Graph data --> */}
        <meta property="og:title" content={metaTitle} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={currentRoute} />
        {ogImage && <meta property="og:image" content={ogImage} />}
        <meta property="og:description" content={metaDescription} />
        <meta property="og:site_name" content="Dataai Jobs" />
      </Head>

      {page.data.uppertitle && page.data.title && page.data.description && (
        <Hero upperTitle={upperTitle} title={title} description={description} />
      )}
      <SliceZone slices={page.data.slices} components={components} />
    </React.Fragment>
  );
};

export default Page;

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const page = await client.getByUID("pillar_page", params.uid);

  return {
    props: {
      metaTitle: page.data.meta_title,
      metaDescription: page.data.meta_description,
      ogImage: page.data.og_image.url,
      page: page,
      title: page.data.title,
      upperTitle: page.data.uppertitle,
      description: page.data.description,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const pages = await client.getAllByType("pillar_page");

  return {
    paths: pages.map((page) => prismicH.asLink(page)),
    fallback: false,
  };
}

As I am a Junior Developer, I am sure that there is a DRY way of doing it.
For this first iteration, I am just wondering if there's a way for me to improve the front display when the "answer" of the FAQ has multiple paragraphs or bullet points.

Thanks for the help!