Simple and type-safe Markdown/MDX content management tool for Next.js App Router.
https://github.com/cieloazul310/regista
.
├── content
│ ├── author
│ ├── post
│ └── categories.yml
├── public
│ └── assets
├── src
│ ├── app
│ └── content
├── next.config.mjs
├── package.json
└── tsconfig.json
-
content/author
: Directory where author data are stored -
content/post
: Directory where Markdown/MDX contents are stored -
content/categories.yml
: Filepath where categories data is stored -
src/content/index.ts
: Content definition file
You can change the location of stored content and data definitions as you like.
npm install @cieloazul310/regista
npm install --save-dev @mdx-js/mdx
// src/content.index.ts
import * as path from "path";
import { z, defineMdx } from "@cieloazul310/regista";
export const post = defineMdx({
contentPath: path.resolve(process.cwd(), "content/post"),
basePath: "/post",
schema: {
author: z.string().optional(),
},
});
export type PostFrontmatter = z.infer<typeof post.schema>;
export type PostMetadata = z.infer<typeof post.metadataSchema>;
// src/app/post/[...slug].tsx
import NextLink from "next/link";
import type { Metadata } from "next";
import { post } from "@/content";
export async function generateStaticParams() {
const allPosts = await post.getAll(); // => PostMetadata[]
return allPosts;
}
async function Page({ params }: { params: { slug: string[] } }) {
const { slug } = params;
const item = await post.useMdx(slug);
if (!item) return null;
const { content, frontmatter, context } = item;
const { title, date, lastmod, author } = frontmatter;
const { older, newer } = context;
return (
<>
<article>
<header>
<h1>{title}</h1>
<small>
<time>{date.toDateString()}</time>
</small>
</header>
<section>{content}</section>
</article>
<nav>
{older && (
<div>
<p>Older post</p>
<NextLink href={older.href}>{older.frontmatter.title}</NextLink>
</div>
)}
{newer && (
<div>
<p>Newer post</p>
<NextLink href={newer.href}>{newer.frontmatter.title}</NextLink>
</div>
)}
</nav>
</>
);
}
export default Page;
Dynamic Routes https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes