NextJS

📘

Todavía estamos enriqueciendo la información en nuestro complemento. Estén atentos para más formas de aprovechar los superpoderes de Notice con NextJS.

Integrarlo

Instale nuestro paquete con npm install notice-org/next

import { NTC, NTCFragment, Notice } from "@notice-org/next";

interface Props {
  notice: NTCFragment;
}

export default function Page({ notice }: Props) {
  return <Notice fragment={notice} />;
}

export async function getServerSideProps() {
  const notice = await NTC.fragment({ pageId: "{{{project}}}" });

  return {
    props: {
      notice,
    },
  };
}

¡Y eso es todo, ya está todo listo!

🌱

Puede personalizar todo y obtener los datos en markdown, JSON o fragmentados en diferentes partes HTML. Siga leyendo para entender cómo funciona.

Uso avanzado

Si necesita más granularidad, por ejemplo, para hacer su propia representación, lo tenemos cubierto.

Obtenga los datos de la cabecera e insértelos en su aplicación NextJS

1. Obtenga la lista de elementos en getServerSideProps

export async function getServerSideProps(ctx: any) {
  const md = await NTC.markdown({ pageId: ctx.query.id });
  const head = await NTC.head({ pageId: ctx.query.id });

  return {
    props: {
      article: md,
      head,
    },
  };
}

2. Crear una función que transforme cada elemento en la lista JSON en un Elemento React.

function createHeadElements(head: NTCWebElement[]) {
  const heads: DOMElement<any, Element>[] = [];

  for (let elem of head) {
    let element;

    if (elem.innerHTML) {
      element = React.createElement(elem.tagName, {
        ...elem.attributes,
        dangerouslySetInnerHTML: { __html: elem.innerHTML },
      });
    } else if (elem.innerText) {
      element = React.createElement(elem.tagName, elem.attributes, [elem.innerText]);
    } else {
      element = React.createElement(elem.tagName, elem.attributes);
    }

    heads.push(element);
  }

  return heads;
}

3. Llame a la función en un useMemo y coloque sus elementos dentro de <Head /> de NestJS

export default function Article({ article, head }: { article: string; head: NTCWebElement[] }) {
  const content = useMemo(() => marked.parse(article) as string, [article]);
  const headElements = useMemo(() => createHeadElements(head), [head]);

  return (
    <>
      <Head>
    {...headElements}
  </Head>
      <div className="article" dangerouslySetInnerHTML={{ __html: content }}></div>
    </>
  );
}

Creado con Notice