How do I use Nextra in my already existing NextJs 13 app (using the appDir)?

[USKhokhar]

I have a NextJs 13 app (the latest, stable version). I want to integrate Nextra into it, how do I do it?

[Learning-X]

I'm currently having the same issue and just saw that you didn't have any response yet. That's sad, I will change for another doc template as I don't feel we gonna have an answers from these people.

[erichosick]

I have a similar issue.

First running pnpm create create-next-app@latest and then adding the Next.js config code as shown here.

Running yarn dev gives the error "Couldn't find a pages directory. Please create one under the project root".

Looking at the code the error comes from we see this code:

function findPagesDir(dir, isAppDirEnabled) {
    const pagesDir = findDir(dir, "pages") || undefined;
    const appDir = findDir(dir, "app") || undefined;
    if (isAppDirEnabled && appDir == null && pagesDir == null) {
        throw new Error("> Couldn't find any `pages` or `app` directory. Please create one under the project root");
    }
    if (!isAppDirEnabled) {
        if (pagesDir == null) {
            throw new Error("> Couldn't find a `pages` directory. Please create one under the project root");
        }
    }
    return {
        pagesDir,
        appDir: isAppDirEnabled ? appDir : undefined
    };
}

but if we look where this is called from we see that isAppDirEnabled is hard coded to false:

function findPagesDirectory() {
  const res = findPagesDir(CWD, false);
  return res.pagesDir || // next v13
  res.pages;
}

So we will never be able to run out of the /app directory.

But there is a blog post that says Next.js 13 is supported https://the-guild.dev/blog/nextra-2#support-nextjs-13

I could be totally off but it looks like this is not supported yet in Nextra.

[erichosick]

Also see discussion Support for app router.

[C-EO]

@erichosick You can use this reference for info.

[erichosick]

Thank you.