Buildng project using only app router

[BjoernRave]

What version of this package are you using?

2.6.2

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

node 20.2, npm: 9.6.6

What happened?

I have

When trying to build my application I got an error. It seems when trying to build the /404 and /505 pages next-translate tries to inject in there or sth and that causes an issue, because NextRouter was not mounted. which could be a sign, that it tries to use next/router import in an app router environment where it should use next/navigation

✓ Creating an optimized production build    
 ✓ Compiled successfully
   Skipping validation of types
   Skipping linting
 ✓ Collecting page data    
   Generating static pages (0/16)  [=   ]Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
 ⚠ Entire page / deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /
 ⚠ Entire page /[lang]/dashboard/time-tracking deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/time-tracking
 ⚠ Entire page /[lang]/dashboard/time-tracking deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/time-tracking
 ⚠ Entire page /[lang]/dashboard/table-plan deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/table-plan
 ⚠ Entire page /[lang]/dashboard/table-plan deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/table-plan
 ⚠ Entire page /[lang]/dashboard/order-history deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/order-history
 ⚠ Entire page /[lang]/dashboard/order-history deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/order-history
   Generating static pages (4/16)  [==  ] 
 ⚠ Entire page /[lang]/dashboard/products deopted into client-side rendering. https://nextjs.org/docs/messages/deopted
   Generating static pages (13/16) [=== ] 
 ⚠ Entire page /[lang]/dashboard/service-calls deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/service-calls
 ⚠ Entire page /[lang]/dashboard/products deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/products
 ⚠ Entire page /[lang]/dashboard/service-calls deopted into client-side rendering. https://nextjs.org/docs/messages/de
 ✓ Generating static pages (16/16) 

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
 ELIFECYCLE  Command failed with exit code 1.

This is what my next.config.js looks like.

This is what the /[lang]/layout.tsx looks like:

import { redirect } from "next/navigation"
import ThemeRegistry from "@/components/ThemeRegistry"
import useTranslation from "next-translate/useTranslation"

import i18n from "../../i18n"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { lang } = useTranslation()

  // Redirect to default locale if lang is not supported. /second-page -> /en/second-page
  if (!i18n.locales.includes(lang)) {
    redirect(`/${i18n.defaultLocale}/${lang}`)
  }

  return (
    <div className="flex min-h-screen w-full flex-col bg-primary-700 text-white">
      <ThemeRegistry lang={lang}>{children}</ThemeRegistry>
    </div>
  )
}

export function generateStaticParams() {
  return i18n.locales.map((locale) => ({
    lang: locale,
  }))
}

When I dont remove i18n from the config this is what I get for every route:

Error occurred prerendering page "/de". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/' doesn't match the '/[lang]' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)

Error occurred prerendering page "/en/dashboard/table-plan". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/dashboard/table-plan' doesn't match the '/[lang]/dashboard/table-plan' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)

Error occurred prerendering page "/en/dashboard/time-tracking". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/dashboard/time-tracking' doesn't match the '/[lang]/dashboard/time-tracking' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)

[aralroca]

Probably is related to https://github.com/aralroca/next-translate/issues/1144 about generateStaticParams

[BjoernRave]

Possible, but as far as I can tell in the linked issue the problem is due to the i18n object being present in the config. since I am only on app router I removed it from my next.config.js file as you can see above, but the NextRouter was not mounted error persists. If I remove generateStaticParams and dont remove the i18n object I still get this error:

Error occurred prerendering page "/de/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
 ✓ Generating static pages (8/8) 

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
        /_error: /de/404
        /_error: /de/500
        /_error: /en/404
        /_error: /en/500

[andre-lergier]

I can confirm this issue, I also get the following error:

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500

It only appears since I deleted the pages directory.

[hoffination]

I'm also getting a similar issue when upgrading to Next 14 in my team's application. I see the errors on paths. Our application is still using page routes for every URL.

[cglacet]

I'm no expert of this project, but I doubt the example is functional, look at this redirect:

redirect(`/${i18n.defaultLocale}/${lang}`)

I guess here should be a redirect to the requested path and not to the root, also this /en/non-supported-lang redirect doesn't make any sense to me, unless lang is not a language identifier but a page subpath (which would be even stranger).

EDIT

I checked, lang is what I thought so this would make more sense:

redirect(`/${i18n.defaultLocale}`)

I also checked and the example project doesn't work properly under [email protected].

[cglacet]

I found a solution here that works for me. It requires a few tweaks but overall, all the ingredients are here.

[X7Becka]

I found a solution here that works for me. It requires a few tweaks but overall, all the ingredients are here.

I see no solution in link you provided. Still no idea how to avoid using next/router instead of next/navigate

[cglacet]

In the end I switched to another package because I think this one is not ready yet. I've tried quite hard but without success. I've used next international which worked flawlessly With the new app directory (even with the latest versions of next).

[tresorama]

Tested today ([email protected]) but cannot make this package working.

Problems encountered

• The official example with app dir is not working.

• In layout.tsx is not possible to get the current request pathname, because a layout "wraps" more than one request. A better place to handle "HTTP redirection" (/about to /en/about) is Next.js middleware, where pathname is available. Said so:

  • this code should be moved in middleware https://github.com/aralroca/next-translate/blob/7b9587cd2ac3b865ee4709a1331effd953eddbef/examples/with-app-directory/src/app/layout.tsx#L12-L13
  • that code also is also potential wrong like @cglacet mentioned in https://github.com/aralroca/next-translate/issues/1171#issuecomment-1840503739

• The middleware never runs, in order to make it "run" it had to remove nextTranslate(nextConfig) from next.config.js, but doing so the entire library is disabled.