Use GitHub repo as CMS in Next.js (similar Hashnode's Github as source)
Warning This package is early in development. Do NOT use in production environment.
npm install next-github-source
lib/githubSourceClient.js
import { createClient } from "next-github-source";
export const client = createClient({
repo: {
remote: `https://github.com/Hashnode/Hashnode-source-from-github-template`,
},
pattern: [`**`, "!README.md"], // list all except README.md
});
pages/index.js
import Link from "next/link";
import { client } from "../../lib/githubSourceClient";
export const getStaticProps = async () => {
const posts = await client.getAllEntries();
return {
props: { posts },
};
};
export default function Posts({ posts }) {
return (
<div>
{posts.map((post, idx) => (
<Link key={idx} href={`/posts/${post.slug}`}>
<a>
[{post.source}]({post.slug})
</a>
</Link>
))}
</div>
);
}
pages/posts/[slug].js
import { client } from "../../lib/githubSourceClient";
export const getStaticPaths = async () => {
return {
paths: await client.getAllEntryPaths(),
fallback: false,
};
};
export const getStaticProps = async ({ params }) => {
const post = await client.getEntry(params.slug);
return {
props: { post },
};
};
export default function Post({ post }) {
return <div>{JSON.stringify(post)}</div>;
}
- Examples with
next-mdx-remote
- On-demand revalidation support with examples
- Matter support with types & validation
- High test coverage
- Docs
MIT License © 2022 Sinan Bekar