I’m using Next 14 and the page router rather than the app router

in _app.tsx I’ve wrapped as follows.

<NextIntlClientProvider
  locale={router.locale}
  messages={pageProps.messages}
  timeZone='UTC'
>
  <Component {...pageProps} key={router.pathname} />
</NextIntlClientProvider>

I’m injecting messages into each page with:

export async function getStaticProps(context) {
  return {
    props: {
      messages: (await import(`../../i18n/${context.locale}.json`)).default,
    },
  }
}

This works fine for normal routes.

The problem I have is dynamic routes.

With dynamic routes I have:

export async function getStaticProps(context) {
  return {
    props: {
      messages: (await import(`../../i18n/${context.locale}.json`)).default,
    },
  }
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: false,
  }
}

When using any dynamic routes. (/item/[itemId]/) I get hundreds of the following messages in the console before the page eventually renders.

Error: MISSING_MESSAGE: No messages were configured on the provider.
    at getMessagesOrError (createFormatter-3c05ea0b.js:106:23)
    at Object.createBaseTranslator (createFormatter-3c05ea0b.js:125:27)
    at eval (react.js:34:57)
    at mountMemo (react-dom.development.js:16406:19)
    at Object.useMemo (react-dom.development.js:16851:16)
    at Object.useMemo (react.development.js:1651:21)
    at useTranslationsImpl (react.js:34:27)
    at useTranslations (react.js:63:10)
    at eval (index.js:22:14)
    at NavMenuItem (NavMenuItem.tsx:27:28)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20098:13)
    at beginWork (react-dom.development.js:21621:16)
    at beginWork$1 (react-dom.development.js:27460:14)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)
    at renderRootSync (react-dom.development.js:26468:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25772:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

It seems Next tries to render without messages loaded. I also get these at build time.

Is there some way around this?

I’m trying to pass i18n messages into components on the dynamic page. But it looks like it can’t get access to them at a certain stage of component rendering.