Add next-mdx-remote #82

a3thakra · 2021-07-05T20:56:29-04:00

a3thakra commented

2021-07-05 20:56:29 -04:00

Closes #80

Example

// lib/events.ts

import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";

export async function getEvent() {
  // you should use the "fs" nodejs api here
  const fileAfterReading = `
---
title: A title
online: false
location: MC
---

## Alt Tab

Wooohooo
  `.trim();

  const { content, data } = matter(fileAfterReading);
  const serialized = await serialize(content, { scope: data });

  return { serialized, data };
}

// your-page.tsx

import { GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { getEvent } from "lib/events";

export default function MyPage(props) {
  return (
    <>
      <div>
        {...other stuff}
      </div>
      <MDXRemote {...props.serialized} />
    </>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const { serialized, data } = await getEvent();

  return {
    props: {
      serialized,
      data,
    },
  };
};

Closes #80 # Example ```ts // lib/events.ts import matter from "gray-matter"; import { serialize } from "next-mdx-remote/serialize"; export async function getEvent() { // you should use the "fs" nodejs api here const fileAfterReading = ` --- title: A title online: false location: MC --- ## Alt Tab Wooohooo `.trim(); const { content, data } = matter(fileAfterReading); const serialized = await serialize(content, { scope: data }); return { serialized, data }; } ``` ```tsx // your-page.tsx import { GetStaticProps } from "next"; import { MDXRemote } from "next-mdx-remote"; import React from "react"; import { getEvent } from "lib/events"; export default function MyPage(props) { return ( <> <div> {...other stuff} </div> <MDXRemote {...props.serialized} /> </> ); } export const getStaticProps: GetStaticProps = async () => { const { serialized, data } = await getEvent(); return { props: { serialized, data, }, }; }; ```

a3thakra added 1 commit 2021-07-05 20:56:30 -04:00