NextJS

📘

Nous enrichissons toujours les informations sur notre plugin. Restez à l'écoute pour plus de façons de tirer parti des super pouvoirs de Notice avec NextJS.

Intégrez-le

Installez notre package avec 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,
    },
  };
}

Et voilà, vous êtes prêt !

🌱

Vous pouvez tout personnaliser et obtenir les données en markdown, JSON ou fragmentées dans différents éléments HTML. Continuez à lire pour comprendre comment cela fonctionne.

Utilisation avancée

Si vous avez besoin de plus de granularité, par exemple pour créer votre propre rendu, nous avons ce qu'il vous faut.

Obtenez les données d'en-tête et injectez-les dans votre application NextJS

1. Obtenez la liste des éléments dans 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. Créez une fonction qui transforme chaque élément de la liste JSON en un élément 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. Appelez la fonction dans un useMemo et placez vos éléments à l'intérieur de 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>
    </>
  );
}

Créé avec Notice