Next intl has an error in Next.js 14

[SuperCodeCandy]

Description

I have a question, the dependent version is Next.js 14.

I am based on https://i18nexus.com/tutorials/nextjs/next-intl Using a case study to edit the code, I found the following errors.

terminal：
error：node_modules\next-intl\dist\development\config.js (6:8) @ getConfig

console
error1: Couldn't find next-intl config file. Please follow the instructions at https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components

error2: http://localhost:3000/de 404 (Not Found)
error3： validateDOMNesting(...):

cannot appear as a child of <#document>.
error4：DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

I see a link: https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components

But I can't open it -.-

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/SuperCodeCandy/Intl-error-demo/tree/main

Reproduction description

Can be viewed https://github.com/SuperCodeCandy/Intl-error-demo/tree/main

Expected behaviour

I'm not sure if it's because next-intl doesn't support Next.js14.

[amannn]

Hi, the tutorial you're referencing seems to be slightly outdated. Please follow the official getting started guide or alternatively check out the App Router example.

I'll move this to a discussion since it's not a bug report but a usage question.

[SuperCodeCandy]

Oh, first of all, thank you very much for your reply. My demo uses https://i18nexus.com/tutorials/nextjs/next-intl I will try using the tutorial on the new address you provided for the case provided above. Thank you.

[SuperCodeCandy]

Hi!
When attempting to connect using the learning document you provided me, I apologize for the following error on the console. I was unable to find a solution to the previous issues.

IntlError: MISSING_MESSAGE: No messages were configured on the provider.
at getMessagesOrError (webpack-internal:///(rsc)/./node_modules/use-intl/dist/development/createFormatter-4848f6c8.js:100:27)
at Object.createBaseTranslator (webpack-internal:///(rsc)/./node_modules/use-intl/dist/development/createFormatter-4848f6c8.js:118:29)
at createTranslatorImpl (webpack-internal:///(rsc)/./node_modules/use-intl/dist/development/core.js:15:28)
at createTranslator (webpack-internal:///(rsc)/./node_modules/use-intl/dist/development/core.js:35:12)
at eval (webpack-internal:///(rsc)/./node_modules/next-intl/dist/esm/react-server/getBaseTranslator.js:15:75) { code: 'MISSING_MESSAGE',
originalMessage: 'No messages were configured on the provider.'
}

[SuperCodeCandy]

I have identified the cause of the error message. Thank you

[murbanowicz]

what was the reason?

[viclafouch]

Hey ! I've just got the same issue and I find the cause issue... I have the exact same config as the repo "App demo"

[viclafouch]

Just by doing this

import React from 'react'
import { useTranslations } from 'next-intl'

const Page = () => {
  const { t } = useTranslations()

  return <div>Hello</div>
}

export default Page

I got

validateDOMNesting(...): <div> cannot appear as a child of <#document>.

What is happening ???

[moritzjacobs]

Not sure if still relevant, but you're missing "use client".

[zerosoul]

I have same problems

[SuperCodeCandy]

Hi, The tutorial on that website is outdated. You can try following the tutorial on this website

[savchukartur]

I had the same error. Thanks to the example, I found that in the middleware.ts file, in the exported config.matcher, you need to add the following line: '/((?!_next|_vercel|.\..).*)'

After doing this, the error disappeared

[mahdipakravan-dev]

I had this error and resolved by these steps :

1. ensure all of the page have setRequestLocal(locale) function
2. add these 2 line to your main layout

`export function generateStaticParams() {
return routing.locales.map((locale) => ({ locale }))
}

export async function generateMetadata({ params: { locale } }: { params: any }) {
const t = await getTranslations({ locale, namespace: 'LocaleLayout' })

return {
title: t('title'),
}
}`

3.ensure this code is available in your middleware config
'/((?!_next|_vercel|.\..).*)'