Buildng project using only app router #1171

BjoernRave · 2023-11-07T14:31:13Z

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)

The text was updated successfully, but these errors were encountered:

aralroca · 2023-11-07T15:56:23Z

Probably is related to #1144 about generateStaticParams

BjoernRave · 2023-11-10T13:04:26Z

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 · 2023-11-16T10:29:53Z

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 · 2023-11-16T21:07:42Z

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 · 2023-12-05T10:51:04Z

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 · 2023-12-05T14:44:10Z

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

X7Becka · 2023-12-12T08:40:49Z

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 · 2023-12-19T00:16:35Z

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 · 2024-02-01T18:11:29Z

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

next-translate/examples/with-app-directory/src/app/layout.tsx

Lines 12 to 13 in 7b9587c

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

that code also is also potential wrong like @cglacet mentioned in Buildng project using only app router #1171 (comment)

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Buildng project using only app router #1171

Buildng project using only app router #1171

BjoernRave commented Nov 7, 2023 •

edited

Loading

aralroca commented Nov 7, 2023

BjoernRave commented Nov 10, 2023

andre-lergier commented Nov 16, 2023 •

edited

Loading

hoffination commented Nov 16, 2023

cglacet commented Dec 5, 2023 •

edited

Loading

cglacet commented Dec 5, 2023

X7Becka commented Dec 12, 2023

cglacet commented Dec 19, 2023

tresorama commented Feb 1, 2024 •

edited

Loading

Buildng project using only app router #1171

Buildng project using only app router #1171

Comments

BjoernRave commented Nov 7, 2023 • edited Loading

aralroca commented Nov 7, 2023

BjoernRave commented Nov 10, 2023

andre-lergier commented Nov 16, 2023 • edited Loading

hoffination commented Nov 16, 2023

cglacet commented Dec 5, 2023 • edited Loading

EDIT

cglacet commented Dec 5, 2023

X7Becka commented Dec 12, 2023

cglacet commented Dec 19, 2023

tresorama commented Feb 1, 2024 • edited Loading

BjoernRave commented Nov 7, 2023 •

edited

Loading

andre-lergier commented Nov 16, 2023 •

edited

Loading

cglacet commented Dec 5, 2023 •

edited

Loading

tresorama commented Feb 1, 2024 •

edited

Loading