Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Non-FB-scale MDX with shared layout/nav
import Layout from "@/components/Layout";
import { getContentPaths } from "@/utils/getContentPaths";
import { getPageFromSlug } from "@/utils/getPageFromSlug";
import { GetStaticProps } from "next";
import dynamic from "next/dynamic";
import { renderToStaticMarkup } from "react-dom/server";
export default function ContentPage({ __html, frontmatter, pages, slug }) {
const Content = dynamic(() => import(`../content/${slug}/index.mdx`), {
loading() {
return <div dangerouslySetInnerHTML={{ __html }} />;
},
});
return (
<Layout pages={pages} frontmatter={frontmatter}>
<Content />
</Layout>
);
}
export async function getStaticPaths() {
const paths = await getContentPaths();
return {
paths,
// https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking for development
fallback: false,
};
}
// https://nextjs.org/docs/basic-features/data-fetching
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Get page from `slugs` param
const slug = [].concat(params.slugs).join("/");
const { default: Content, frontmatter = {} } = await import(
`../content/${slug}/index.mdx`
);
// Get navigation from all pages
const paths = await getContentPaths();
const pages = await Promise.all(
paths.map(getPageFromSlug).map(page =>
page.then(({ frontmatter, href, slug }) => ({
frontmatter,
href,
slug,
}))
)
);
return {
props: {
__html: renderToStaticMarkup(<Content />),
pages,
frontmatter,
slug,
},
};
};
@ericclemmons
Copy link
Author

ericclemmons commented Jul 12, 2021

This doesn't scale past several dozen pages in my testing (because dynamic import states have been slow for Webpack since v2)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment