هذه الواجهة البرمجية مخصصة في المقام الأول لمؤلفي المكتبات. في الوقت الحالي، يتم دعم توجيه نظام الملفات بنمط Next.js فقط، ولكن قد يتم إضافة أنماط أخرى في المستقبل.

بنمط Next.js

يمكن لفئة FileSystemRouter حل المسارات مقابل مجلد pages. (مجلد app في Next.js 13 غير مدعوم بعد.) ضع في اعتبارك مجلد pages التالي:

pages
├── index.tsx
├── settings.tsx
├── blog
│   ├── [slug].tsx
│   └── index.tsx
└── [[...catchall]].tsx

يمكن استخدام FileSystemRouter لحل المسارات مقابل هذا المجلد:

const router = new Bun.FileSystemRouter({
  style: "nextjs",
  dir: "./pages",
  origin: "https://mydomain.com",
  assetPrefix: "_next/static/"
});

router.match("/");

// =>
{
  filePath: "/path/to/pages/index.tsx",
  kind: "exact",
  name: "/",
  pathname: "/",
  src: "https://mydomain.com/_next/static/pages/index.tsx"
}

سيتم تحليل معلمات الاستعلام وإرجاعها في الخاصية query.

router.match("/settings?foo=bar");

// =>
{
  filePath: "/Users/colinmcd94/Documents/bun/fun/pages/settings.tsx",
  kind: "dynamic",
  name: "/settings",
  pathname: "/settings?foo=bar",
  src: "https://mydomain.com/_next/static/pages/settings.tsx",
  query: {
    foo: "bar"
  }
}

سيقوم الموجه تلقائيًا بتحليل معلمات URL وإرجاعها في الخاصية params:

router.match("/blog/my-cool-post");

// =>
{
  filePath: "/Users/colinmcd94/Documents/bun/fun/pages/blog/[slug].tsx",
  kind: "dynamic",
  name: "/blog/[slug]",
  pathname: "/blog/my-cool-post",
  src: "https://mydomain.com/_next/static/pages/blog/[slug].tsx",
  params: {
    slug: "my-cool-post"
  }
}

تقبل الدالة .match() أيضًا كائنات Request و Response. سيتم استخدام الخاصية url لحل المسار.

router.match(new Request("https://example.com/blog/my-cool-post"));

سيقرأ الموجه محتويات المجلد عند التهيئة. لإعادة فحص الملفات، استخدم الدالة .reload().

router.reload();

المرجع

interface Bun {
  class FileSystemRouter {
    constructor(params: {
      dir: string;
      style: "nextjs";
      origin?: string;
      assetPrefix?: string;
      fileExtensions?: string[];
    });

    reload(): void;

    match(path: string | Request | Response): {
      filePath: string;
      kind: "exact" | "catch-all" | "optional-catch-all" | "dynamic";
      name: string;
      pathname: string;
      src: string;
      params?: Record<string, string>;
      query?: Record<string, string>;
    } | null
  }
}