Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Created July 12, 2021 16:14
Show Gist options
  • Save ericclemmons/a40f0a092be01ea3e4e7b40b9a8c92b5 to your computer and use it in GitHub Desktop.
Save ericclemmons/a40f0a092be01ea3e4e7b40b9a8c92b5 to your computer and use it in GitHub Desktop.
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

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