NextJS

📘

Stiamo ancora arricchendo le informazioni sul nostro plugin. Resta sintonizzato per ulteriori modi per sfruttare i superpoteri di Notice con NextJS.

Integrarlo

Installa il nostro pacchetto 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,
    },
  };
}

E questo è tutto, sei pronto!

🌱

È possibile personalizzare tutto e ottenere i dati in markdown, JSON o frammentati in diverse parti HTML. Continua a leggere per capire come funziona.

Utilizzo avanzato

Se hai bisogno di maggiore granularità, ad esempio per creare la tua propria rappresentazione, siamo pronti a darti una mano.

Ottieni i dati dell'head e iniettali nella tua app NextJS

1. Ottieni l'elenco degli elementi in 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. Crea una funzione che trasformi ciascun elemento nell'elenco JSON in 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. Chiama la funzione in un useMemo e inserisci i tuoi elementi all'interno di NestJS <Head />

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>
    </>
  );
}

Created with Notice