NextJS

📘

Ainda estamos enriquecendo informações em nosso plugin. Fique ligado para mais maneiras de aproveitar os superpoderes do Notice com o NextJS.

Integre isso

Instale nosso pacote com 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,
    },
  };
}

E é isso, você está pronto!

🌱

Você pode personalizar tudo e obter os dados em markdown, JSON ou fragmentados em diferentes partes HTML. Continue lendo para entender como funciona.

Uso avançado

Se você precisa de mais granularidade, por exemplo, para fazer sua própria renderização, nós te cobrimos.

Obtenha os dados da cabeça e injete-os em seu aplicativo NextJS

1. Obtenha a lista de elementos em 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. Crie uma função que transforme cada elemento na lista JSON em um 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. Chame a função em um useMemo e coloque seus elementos dentro de <Head /> do 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>
    </>
  );
}

Criado com Notice