SSG not possible in app directory

[nickderobertis-ch]

What version of this package are you using?

v2.5.3

What operating system, Node.js, and npm version?

MacOS, v18.7.0, 8.15.0

What happened?

Building NextJS with app directory, [lang] paths, and generateStaticParams fails, with errors such as these (one per language):

Error occurred prerendering page "/en". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/' doesn't match the '/[lang]/page' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at /Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/export/worker.js:156:27
    at Span.traceAsyncFn (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/trace/trace.js:103:26)
    at Object.exportPage (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/export/worker.js:96:27)
    at execFunction (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2828)
    at execHelper (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2486)
    at execMethod (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2574)
    at process.messageListener (/Users/nderobertis/repos/with-next-translate-app/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1284)
    at process.emit (node:events:513:28)
    at emit (node:internal/child_process:937:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:83:21)

I have a full reproduction here on the ssg-bug branch, simply run yarn build. I simply used the NextJS official example for next-translate, upgraded to the latest working versions (see #1142), then added generateStaticParams.

What did you expect to happen?

Build completes successfully with statically generated language pages.

Are you willing to submit a pull request to fix this bug?

I am motivated to get this fixed quickly, so I would be willing to help but I am not familiar with the internals of next-translate or next. With some guidance I would be happy to do the heavy lifting.

[nickderobertis-ch]

Similarly to #1142, this hack allows the build to complete so it seems at least partially related to the next config i18n that is used for the pages directory. However when I apply this "fix," it allows the build to complete but the pages fail at runtime with different errors. It flashes the page content but then it becomes a blank screen and throws Hydration failed because the initial UI does not match what was rendered on the server.

[RubenHamakers]

@nickderobertis-ch have you tried properly typing the lang variables?

export default async function SiteLayout({ children, params }: { children: React.ReactNode, params: { lang: Locale } }) {

I can build just fine, just run into some other issues where I get

"Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported." but thats related to some other thing I fucked up myself.

Nvm i see you're on JS..

[nickderobertis-ch]

Yeah JS for this reproduction but I originally hit this issue in our TS codebase properly typed.

I think this is actually due to an issue in NextJS itself: vercel/next.js#55331

[RubenHamakers]

Ah. Honestly it's starting to feel like a mistake that we went for next js at all. The documentation doesn't seem to cover many advanced / complex implementations of the stuff they themselves offer which leads to running in to dumb errors. Especially if you're migrating from pages to app router.