次のJS

📘

私たちはまだ当社のプラグインの情報を充実させています。 NextJSでNoticeのスーパーパワーを活用するさらなる方法にご期待ください。

それを統合する

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」で作成されました。