NextJS

📘

我们仍在丰富有关我们插件的信息。敬请关注，了解如何充分利用 Notice 在 NextJS 中的超能力。

集成它

使用 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,
    },
  };
}

就是这样，您已经准备就绪！

🌱

您可以自定义一切，并以 markdown、JSON 或在不同 HTML 部分中分段获取数据。继续阅读，了解其工作原理。

高级用法

如果您需要更精细的控制，例如自定义渲染，我们为您提供了支持。

获取头部数据并将其注入到您的 NextJS 应用程序中

1. 在 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. 创建一个函数，将 JSON 列表中的每个元素转换为 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. 在 useMemo 中调用该函数，并将您的元素放入 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>
    </>
  );
}

由 Notice 创建