NextJS

📘

Wir bereichern weiterhin die Informationen über unser Plugin. Bleiben Sie dran für weitere Möglichkeiten, die Vorteile von Notice-Superkräften mit NextJS zu nutzen.

Integrieren Sie es

Installieren Sie unser Paket mit 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,
    },
  };
}

Und das ist es, Sie sind bereit!

🌱

Sie können alles anpassen und die Daten in Markdown, JSON oder fragmentiert in verschiedenen HTML-Teilen erhalten. Lesen Sie weiter, um zu verstehen, wie es funktioniert.

Erweiterte Nutzung

Wenn Sie mehr Feinabstimmung benötigen, zum Beispiel um Ihre eigene Darstellung zu erstellen, sind Sie bei uns an der richtigen Stelle.

Holen Sie die Kopfdaten und fügen Sie sie in Ihre NextJS-App ein

1. Holen Sie sich die Liste der Elemente 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. Erstellen Sie eine Funktion, die jedes Element in der JSON-Liste in ein React-Element umwandelt.

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. Rufen Sie die Funktion in einem useMemo auf und platzieren Sie Ihre Elemente innerhalb von 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>
    </>
  );
}

Erstellt mit Notice