@cieloazul310/regista
v1.0.0
Published
Simple and type-safe Markdown/MDX content management tool for Next.js App Router
Downloads
17
Readme
Regista
Simple and type-safe Markdown/MDX content management tool for Next.js App Router.
https://github.com/cieloazul310/regista
Usage
Example project structure (Next.js App Router)
.
├── content
│ ├── author
│ ├── post
│ └── categories.yml
├── public
│ └── assets
├── src
│ ├── app
│ └── content
├── next.config.mjs
├── package.json
└── tsconfig.json
Directories and files
content/author
: Directory where author data are storedcontent/post
: Directory where Markdown/MDX contents are storedcontent/categories.yml
: Filepath where categories data is storedsrc/content/index.ts
: Content definition file
You can change the location of stored content and data definitions as you like.
Getting started
1. Installation
npm install @cieloazul310/regista
npm install --save-dev @mdx-js/mdx
2. Set up
// 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>;
3. Using with Dynamic routes
// 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