Fumadocs keeps showing only content on one (index.mdx) file

[piotr-kozlowski-reps]

Hi,

I've got a problem I can't solve.
Help if possible, please, please :)

PROBLEM: whatever mdx files (or folder with mdx files) I put in content/instrukcja folder - whereever I click in side navigation - only content of one - index.mdx file is shown :(

I'm sending my file structure image (I may have messed something, 'couse I use /src folder):

next.config.mjs:

import createMDX from 'fumadocs-mdx/config';
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

const withMDX = createMDX();

// export default withMDX(nextConfig);

export default withMDX(
  withSentryConfig(nextConfig),
  {
   //some sentry stuff
  }
);

mdx-components.tsx:

import type { MDXComponents } from 'mdx/types';
// Assume you're using Fumadocs UI
import defaultComponents from 'fumadocs-ui/mdx';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    ...components,
  };
}

source.ts:

import { map } from '@/../.map';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from 'fumadocs-mdx';

export const { getPage, getPages, pageTree } = loader({
  baseUrl: '/instrukcja',
  rootDir: 'instrukcja',
  source: createMDXSource(map),
});

layout.tsx:

import { DocsLayout } from 'fumadocs-ui/layout';
import type { ReactNode } from 'react';
import { pageTree } from '../source';

export default function RootDocsLayout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout tree={pageTree} nav={{ title: 'My App' }}>
      {children}
    </DocsLayout>
  );
}

page.tsx:

import { DocsBody, DocsPage } from 'fumadocs-ui/page';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getPage, getPages } from '../../source';

export default async function Page({
  params,
}: {
  params: { slug?: string[] };
}) {
  const page = getPage(params.slug);

  // console.log({ page });

  if (page == null) {
    notFound();
  }

  const MDX = page.data.exports.default;

  return (
    <DocsPage toc={page.data.exports.toc} full={page.data.full}>
      <DocsBody>
        <h1>{page.data.title}</h1>
        <MDX />
      </DocsBody>
    </DocsPage>
  );
}

export async function generateStaticParams() {
  return getPages().map((page) => ({
    slug: page.slugs,
  }));
}

export function generateMetadata({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params.slug);

  if (page == null) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
  } satisfies Metadata;
}

As you can see - mostly copy-paste from fumadoc's docs, despite of baseUrl and rootDir.

What am I doing wrong?

Looking forward to your help
Piotr

[fuma-nama]

Could you elaborate more? Only the content of index.mdx is shown, no matter which page you're on? You can send a screenshot of the site

[piotr-kozlowski-reps]

sure - here you are - I added a new directory with 3 mdx files - here's a screen:

whichever nav element I click I see content of index.mdx like this:

the only change I see - when I click a nav element within subdirectory - like "Kategorie" - you can see additional info in what subdirectory you are - here's a screen (but as you can see - the content of MDX file is all the time the same):

[fuma-nama]

That's pretty weird, could you open an issue (bug report) and provide a minimal reproducible repo there?

[piotr-kozlowski-reps]

I wish I could ... but now I need to finish the project quickly.
For now I'm switching back to nextra, and when I finish everything I will cut the repo piece by piece to prepare minimal repo for you.
Bye and thank you for your response.

[fuma-nama]

I see. Don't worry, just pick the path that suits you more, Nextra is also a great option :)