다음JS

📘

우리는 여전히 플러그인에 대한 정보를 보강 중입니다. Notice 슈퍼파워를 다음JS로 활용하는 더 많은 방법을 기다려주십시오.

통합하세요

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

그리고 그게 다예요, 모두 설정되었습니다!

🌱

모든 것을 사용자 정의하고 데이터를 마크다운, JSON 또는 다른 HTML 부분으로 단편화하여 얻을 수 있습니다. 작동 방식을 이해하려면 계속 읽어보세요.

고급 사용법

예를 들어 자체 렌더링을 하려면 더 세분화된 제어가 필요한 경우에 대비되어 있습니다.

헤드 데이터를 가져와서 다음JS 앱에 주입하세요

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. 각 요소를 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로 제작되었습니다