EmcyDocs

Getting Started

Getting Started

Install the package, point it at a content directory, and render docs from a single source object.

3 sections3 locales

Get up and running with EmcyDocs in minutes.

Installation#

Install the package from npm:

BASH
npm install @emcy/docs

Quick setup#

1. Create a docs source#

Create a file like lib/docs.ts in your app:

TS
import path from "node:path";
import { createDocsSource } from "@emcy/docs";
 
export const docsSource = createDocsSource({
  contentDir: path.join(process.cwd(), "content/docs"),
  basePath: "/docs",
  defaultLocale: process.env.NEXT_PUBLIC_EMCYDOCS_DEFAULT_LOCALE ?? "en",
  locales: ["en", "es", "zh"],
  hideDefaultLocaleInUrl: true,
  sectionOrder: ["", "guides", "reference"],
});

The docsSource object is your single source of truth for content, navigation, metadata, and search.

2. Create the layout#

Add a layout file at app/docs/layout.tsx:

TSX
import { DocsLayout } from "@emcy/docs";
import "@emcy/docs/styles.css";
import { docsSource } from "@/lib/docs";
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <DocsLayout navigation={docsSource.getNavigation()}>
      {children}
    </DocsLayout>
  );
}

3. Create the page#

Add a catch-all page at app/docs/[[...slug]]/page.tsx:

TSX
import { DocsPage, DocsHomePage } from "@emcy/docs";
import { docsSource } from "@/lib/docs";
 
export default async function Page({ params }: { params: { slug?: string[] } }) {
  const resolved = docsSource.resolveRoute(params.slug);
 
  if (resolved.type === "notFound") {
    return notFound();
  }
 
  if (!resolved.entry) {
    return notFound();
  }
 
  if (resolved.entry.isHome) {
    return (
      <DocsHomePage
        entry={resolved.entry}
        navigation={docsSource.getNavigation()}
      />
    );
  }
 
  return (
    <DocsPage
      entry={resolved.entry}
      previousEntry={resolved.previousEntry}
      nextEntry={resolved.nextEntry}
    />
  );
}
 
export function generateStaticParams() {
  return docsSource.getStaticParams();
}

4. Add your first doc#

Create content/docs/getting-started/en.mdx:

MDX
---
title: "Getting Started"
description: "Your first EmcyDocs page"
order: 0
---
 
Welcome to your docs!

That is it. Run npm run dev and visit docs.

Next steps#