Nextra

mkdir ledgerline-docs && cd ledgerline-docs
npm init -y
# ESM package, and a zod version the docs theme works with (see Guidelines)
npm pkg set type=module overrides.zod=4.3.6
npm install next react react-dom nextra nextra-theme-docs
npm install -D pagefind
npm pkg set scripts.dev="next" scripts.build="next build" scripts.start="next start" \
  scripts.postbuild="pagefind --site .next/server/app --output-path public/_pagefind"

// next.config.mjs
import nextra from "nextra";

const withNextra = nextra({
  defaultShowCopyCode: true,          // Copy button on every code block
  search: { codeblocks: false },      // Keep code blocks out of the search index
});

export default withNextra({
  reactStrictMode: true,
});

// mdx-components.js — required; exposes the theme's components to MDX
import { useMDXComponents as getThemeComponents } from "nextra-theme-docs";

export function useMDXComponents(components) {
  return { ...getThemeComponents(), ...components };
}

// app/layout.jsx — theme options are props of Layout, Navbar and Footer
import { Footer, Layout, Navbar } from "nextra-theme-docs";
import { Head } from "nextra/components";
import { getPageMap } from "nextra/page-map";
import "nextra-theme-docs/style.css";

export const metadata = {
  title: { default: "Ledgerline SDK", template: "%s — Ledgerline SDK Docs" },
};

export default async function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <Head />
      <body>
        <Layout
          navbar={<Navbar logo={<b>Ledgerline SDK</b>} projectLink="https://github.com/ledgerline/sdk" />}
          footer={<Footer>MIT {new Date().getFullYear()} © Ledgerline</Footer>}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/ledgerline/sdk/tree/main/docs"
          sidebar={{ defaultMenuCollapseLevel: 1 }}
        >
          {children}
        </Layout>
      </body>
    </html>
  );
}

// app/[[...mdxPath]]/page.jsx — one catch-all route that serves everything in content/
import { generateStaticParamsFor, importPage } from "nextra/pages";
import { useMDXComponents as getMDXComponents } from "../../mdx-components";

export const generateStaticParams = generateStaticParamsFor("mdxPath");

export async function generateMetadata(props) {
  const params = await props.params;
  const { metadata } = await importPage(params.mdxPath);
  return metadata;
}

const Wrapper = getMDXComponents().wrapper;

export default async function Page(props) {
  const params = await props.params;
  const { default: MDXContent, toc, metadata, sourceCode } = await importPage(params.mdxPath);
  return (
    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
      <MDXContent {...props} params={params} />
    </Wrapper>
  );
}

---
title: Getting Started
description: Install the Ledgerline SDK and create your first invoice
---

import { Callout, Cards, FileTree, Steps, Tabs } from 'nextra/components'

# Getting Started

<Callout type="info">
  This guide assumes Node.js 20 or newer.
</Callout>

> [!WARNING]
>
> Test-mode keys start with `ll_test_`. Never ship them to the browser.

<Tabs items={['npm', 'pnpm']}>
  <Tabs.Tab>
    ```bash
    npm install @ledgerline/sdk
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```bash
    pnpm add @ledgerline/sdk
    ```
  </Tabs.Tab>
</Tabs>

<Steps>
### Create the client

```ts filename="src/ledgerline.ts" {3}
import { Ledgerline } from "@ledgerline/sdk";

export const ledgerline = new Ledgerline({ apiKey: process.env.LEDGERLINE_API_KEY });
```

### Create an invoice

```ts
const invoice = await ledgerline.invoices.create({ customer: "cus_8Qw2", amount: 4900 });
```
</Steps>

<FileTree>
  <FileTree.Folder name="src" defaultOpen>
    <FileTree.File name="ledgerline.ts" />
  </FileTree.Folder>
  <FileTree.File name="package.json" />
</FileTree>

<Cards>
  <Cards.Card title="Webhooks" href="/guide/webhooks" />
  <Cards.Card title="Changelog" href="https://github.com/ledgerline/sdk/releases" />
</Cards>

content/
  _meta.js               Sidebar order and labels for this folder
  index.mdx              → /
  getting-started.mdx    → /getting-started
  about.mdx              → /about
  legal.mdx              → /legal
  guide/
    _meta.js
    webhooks.mdx         → /guide/webhooks

// content/_meta.js — keys are file or folder names; unlisted pages are appended alphabetically.
// A key with no matching page (other than separators and href links) fails the build.
export default {
  index: "Introduction",
  "getting-started": "Getting Started",
  "---": { type: "separator", title: "Guides" },
  guide: "Guide",
  changelog: { title: "Changelog", href: "https://github.com/ledgerline/sdk/releases" },
  legal: { display: "hidden" },                    // reachable by URL, not listed
  about: { title: "About", type: "page" },         // shown in the top navigation instead of the sidebar
};

npm run build

Route (app)
┌ ○ /_not-found
└   /[[...mdxPath]]
  ├ ● /about
  ├ ● /getting-started
  ├ ● /guide/webhooks
  └ ● [+2 more paths]

> ledgerline-docs@1.0.0 postbuild
> pagefind --site .next/server/app --output-path public/_pagefind

Running Pagefind v1.5.2 (Extended)
  Indexed 1 language
  Indexed 5 pages

// next.config.mjs
import nextra from "nextra";

const withNextra = nextra({ defaultShowCopyCode: true });

export default withNextra({
  output: "export",
  images: { unoptimized: true },   // required for a static export
});

npm pkg set scripts.postbuild="pagefind --site .next/server/app --output-path out/_pagefind"
npm run build