'Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering' after upgrading to [email protected] #521
Comments
tecoad
changed the title
|
Hmm, that's odd. I noticed that in your CodeSandbox there's no Can you have a look again? Also note that I've added improved support for static rendering in the latest beta ( |
|
I have same issue, after upgrading to next js 13.5 I started to get an error: And the most strange thing is - _not-found page. If I run as dev - then works fine. |
|
I had the same problem with what I did was usgin this value at the top of my pages components |
|
Im facing the same issue in next v. 13.5.6 and beyond. |
|
The CodeSandbox mentioned above is unfortunately broken. Can someone who is experiencing this issue share a reproduction that uses the latest release candidate? |
|
In my case, setting |
|
@amannn I am finding the same problem. Following new 3.0 docs and when I try to build, I receive same error: Error occurred prerendering page "/es". Read more: https://nextjs.org/docs/messages/prerender-error It happens on the main page, here you can find the code. If you remove the force-dynamic and you try to build, you'll receive the error. https://github.com/onarbf/supanextity If I add force-dynamic it builds perfectly, but I think is not the best practice and this is not mentioned in the docs. |
|
@onarbf Your app doesn't use the I couldn't find a reproduction in this thread so far that shows a bug in |
|
@amannn I actually use it, its under the (pages) folder. This is the way nextjs allow us to have folders that are not routes. Do you think this might be what is causing the error? Thank you: 
|
|
@onarbf Oh, that's true! I think it should work. What I noticed in your app is that you use |
Thanks a lot @amannn , it was that. I removed it (I actually don't need it, it was legacy code from the next-intl previous version) and works fine. Thanks! Great tool :) |
|
@amannn At the time i opened this issue i decided to downgrade next so wouldnt waste time. Here is my project structure:
If i just try to build the project, i get the following: Which is odd because i dont have any custom not-found page in my project.
But I try to move the same file to the [locale] folder, i get the same error. |
|
@tecoad follow the docs on next-intl since they have released version 3.0, making this issue obsolete |
|
This issue is back with [email protected] |
Yes, thanks. And additionally adding on top of not-found.tsx : |
I've encountered the same issue and I already add the export const dynamic = 'force-dynamic' on top of my not-found file and it look like this 'use client' import {redirect, usePathname} from "next/navigation"; export default function NotFound() { } I also use Next 14.0.3 but the error still persist, is there something that I missed? I also add unstable_setRequestLocale(locale) on every layout and page |
|
我遇到了一样的错误了 import React from 'react'
import { Box } from '@mui/material'
import { useTranslations } from 'next-intl'
import WithLayout from '@/components/WithLayout'
import SuccessIcon from '@/assets/svg/success.svg'
import Button from '@/components/Button'
import { useRouter } from 'next-intl/client'
import styles from './index.module.scss'
import classnames from 'classnames'
// export const dynamic = 'force-dynamic'
const ColorbangShopSuccess: React.FC = () => {
const t = useTranslations()
// const router = useRouter()
const gotoShopIndex = () => {
// router.push('/colorbang-shop')
}
return (
<div
className={classnames([
styles.page,
'lg:bg-[#F9F9F9]',
'bg-[#F8F8F8]',
'pb-4',
])}
>
<Box
className="pt-[118px] text-center relative"
sx={{ height: `calc(100vh - 16px)` }}
>
<div className="absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]">
<SuccessIcon className="block mx-[auto] mb-[16px]" />
<Box className="mb-[48px]">您已完成购买</Box>
<Button>返回商家</Button>
</div>
</Box>
</div>
)
}
export default ColorbangShopSuccess
|
|
I also encountered this issue, and tried various "working" version of next above but also failed. I tried to add So after adding to my page.tsx: import {unstable_setRequestLocale} from 'next-intl/server';
export default function IndexPage({params: {locale}}) {
unstable_setRequestLocale(locale);
// Once the request locale is set, you
// can call hooks from `next-intl`
const t = useTranslations('IndexPage');
return (
// ...
);
}I encountered: Error: async/await is not yet supported in Client Components, only Server Components.
This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.from next js |
我已经解决了，你的用法不对 |
May I ask how do you fix the issue? |
unstable_setRequestLocale是用在服务端组件的， 对于‘use client’的客户端组件，你不应该使用unstable_setRequestLocale |
I am getting After deploying to Vercel, I am trying to do the Static rendering in every of my pages, if Static rendering should not apply to "use client", then what should I do? |
|
If you have |
I am getting: Error occurred prerendering page "/en/model". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering.
This limitation will eventually be lifted, but as a stopgap solution, you can use the `unstable_setRequestLocale` API to enable static rendering,
see https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#static-renderingin my "use client" /model page, my model page is inside /[locale] |
|
Maybe a layout or |
Sorry, I don't understand, I simply using quick start here to setup my application, but turns out I need to "remove" all "use client" from my pages, is there any workaround to handle "use client" page triggers the |
|
Hey guys! I have a project on Next.js 14+ with App Router and i18n using next-intl. During the build, it gives me the following errors: I have only 1 |
|
@dmytroyurin So you have an app with some routes dynamic and some static, is that correct? I think the issue is that if you add |
|
Hey @amannn thanks for the answer! |
|
I want to ask how to set keywords and titles in the 'use client' component page in the latest version of nextjs app router? It doesn't work by |
|
@dmytroyurin Cool to hear you were able to figure out a solution! You can check on your blog pages if reasonable @lovelyJason Have a look at the Metadata API docs. This might not work when your entire page is a Client Component though, maybe you want to leave at least one Server Component at the top of your page/layout. |
I know. I have used export const metadata:Metadata in the root component Layout.tsx of the application. This is effective for all global pages, but I want to customize SEO for some pages. What should I do? |
|
I've tried every solution mentioned here, but nothing worked for me. However, adding |
|
Forcing dynamic rendering cant be a solution! It can be a performance disaster |
|
Yesterday I also encountered the issue of |
|
I still have this issue with |
|
I got same issue now. It's a bit of a problem when trying to migrate to: https://opennext.js.org/cloudflare/get-started as that does not support |
|
I using next: 14.2.15, next-intl: 3.21.1 and this error still occurs. I have carefully reviewed the discussion above, including
I can't understand why this issue still occurs with the latest version of next-intl. It's very unfriendly to newcomers, and I don't know how to resolve it. Leaving aside the performance issues (which are clearly going to cause performance problems), this solution is not at all elegant, and it will require subsequent development buddies to consider this issue every time they add a new page, leading to a very high understanding cost. But I can only give up on next-intl and switch to i18n-next (although it also has issues, I don't think sacrificing performance to solve problems is a good approach) |
@wxqqh I’m using the same version as you, I just needed to add `export const dynamic = "force-dynamic"` to the not-found file for it to work. Hope this helps you!
|
|
Guys, I had the same error and the fix is that you put this: export const dynamic = 'force-dynamic' inside of the every layout.tsx in your next js app and also in every component. It sounds retarded to fix every file just to make this work but it is how it is. Works good for me. Build went good. |
|
Thanks everyone for helping each other here! While various workarounds are being posted, I'd still really like to see a bug report that demands for such kinds of workarounds. My impression is that there's very likely something fishy going on with how the app is set up (e.g. using That being said, I do really hope to improve the static rendering capability of |
and others
Description
I was previously running on next 13.4.19 using App folder, with my project running without issues.
After upgrading to next latest 13.5.2, I started getting the following errors:
Someone had a similar issue on nextjs without next-intl.
I tried to apply the same solution which was to include to the next.config:
experimental: { serverComponentsExternalPackages: ['next-intl'], },However, now there is a different error preventing the build to:
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: Cannot read properties of null (reading 'useContext')Really tricky bug to trace actually, since we have no further information about it.
Mandatory reproduction URL (CodeSandbox or GitHub repository)
https://codesandbox.io/p/sandbox/next-intl-bug-template-app-forked-6zy5mm
Reproduction description
Steps to reproduce:
generateStaticParams).Expected behaviour
The app to generate build
The text was updated successfully, but these errors were encountered: