NextJS

📘

We are still enriching information on our plugin. Stay tuned for more ways to take advantage of Notice superpowers with NextJS.

Integrate it

Install our package with 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,
    },
  };
}

And that's it, you are all set!

🌱

You can customize everything and get the data in markdown, JSON, or fragmented in different HTML parts. Keep reading to understand how it works.

Advanced usage

If you need more granularity, for example to make your own rendering, we got you covered.

Get the head data and inject it in your NextJS app

1. Get the list of elements 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. Create a function that transform each element in the JSON list into a React Element.

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. Call the function in a useMemo and put your elements inside 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>
    </>
  );
}

Created with Notice