'Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering' after upgrading to next@13.5.2

[tecoad]

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:

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering (i.e. no `generateStaticParams`).

Support for static rendering is under consideration, please refer to the roadmap: https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#roadmap

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:

1. Open reproduction
2. Click on run build
3. See error: Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering (i.e. no generateStaticParams).

Expected behaviour

The app to generate build

[amannn]

Hmm, that's odd. I noticed that in your CodeSandbox there's no next dependency. After installing next@13.5.2 the build works for me.

Can you have a look again?

Also note that I've added improved support for static rendering in the latest beta (next-intl@3.0.0-beta.19).

[botezatpv]

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.

TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (D:\project-frontend\node_modules\react\cjs\react.production.min.js:24:118)
    at Object.useParams (D:\project-frontend\node_modules\next\dist\client\components\navigation.js:171:54)
    at exports.default (D:\project-frontend\node_modules\next-intl\dist\production\react-client\useLocale.js:1:214)
    at s (D:\project-frontend\node_modules\next-intl\dist\production\navigation\BaseLink.js:1:349)
    at ev (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:11711)
    at D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:21907
    at Array.toJSON (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:25224)
    at stringify (<anonymous>)
    at eT (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:13686)
    at eP (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:14212)
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (D:\project-frontend\node_modules\react\cjs\react.production.min.js:24:118)
    at Object.useParams (D:\project-frontend\node_modules\next\dist\client\components\navigation.js:171:54)
    at exports.default (D:\project-frontend\node_modules\next-intl\dist\production\react-client\useLocale.js:1:214)
    at s (D:\project-frontend\node_modules\next-intl\dist\production\navigation\BaseLink.js:1:349)
    at ev (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:11711)
    at D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:21907
    at Array.toJSON (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:25224)
    at stringify (<anonymous>)
    at eT (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:13686)
    at eP (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:14212)

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (D:\project-frontend\node_modules\react\cjs\react.production.min.js:24:118)
    at Object.useParams (D:\project-frontend\node_modules\next\dist\client\components\navigation.js:171:54)
    at exports.default (D:\project-frontend\node_modules\next-intl\dist\production\react-client\useLocale.js:1:214)
    at s (D:\project-frontend\node_modules\next-intl\dist\production\navigation\BaseLink.js:1:349)
    at ev (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:11711)
    at D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:21907
    at Array.toJSON (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:25224)
    at stringify (<anonymous>)
    at eT (D:\project-frontend\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:91:13686)
 ✓ Generating static pages (3/3)

[vicprat]

I had the same problem with

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Usage of next-intl APIs in Server Components is currently only available for dynamic rendering (i.e. no `generateStaticParams`).

Support for static rendering is under consideration, please refer to the roadmap: https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#roadmap.

what I did was usgin this value at the top of my pages components export const dynamic = 'force-dynamic' to create dynamic routes instead of static routes. The information about behavior of the pages is found in here. https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic

[deewebgr]

Im facing the same issue in next v. 13.5.6 and beyond.

[amannn]

The CodeSandbox mentioned above is unfortunately broken. Can someone who is experiencing this issue share a reproduction that uses the latest release candidate?

[bsanchez-grupo-active]

In my case, setting export const dynamic = 'force-dynamic' only in not-found.tsx files, resolves the error.

[onarbf]

@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 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-rendering_

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.

[amannn]

@onarbf Your app doesn't use the [locale] folder that the getting started guide mentions. Generally, you might find it helpful to compare your solution to the official App Router example.

I couldn't find a reproduction in this thread so far that shows a bug in next-intl, therefore I'll close this issue. If you encounter this bug in an app that follows the getting started section, please feel free to open a new issue with a reproduction!

[onarbf]

@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:

[amannn]

@onarbf Oh, that's true! I think it should work.

What I noticed in your app is that you use generateStaticParams. This requires the static rendering integration from next-intl.

[onarbf]

@onarbf Oh, that's true! I think it should work.

What I noticed in your app is that you use generateStaticParams. This requires the static rendering integration from next-intl.

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 :)

[tecoad]

@amannn At the time i opened this issue i decided to downgrade next so wouldnt waste time. But now, i decided to upgrade next to latest so this issue came across again.

Here is my project structure:

If i just try to build the project, i get the following:

Error occurred prerendering page "/_not-found". 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-rendering
    ......
 ✓ Generating static pages (4/4) 

> Export encountered errors on following paths:
        /_not-found

Which is odd because i dont have any custom not-found page in my project. If I create one, at the root of the app folder, with the "export const dynamic = 'force-dynamic'", then I am able to build the project (regardless if i am using next-intl in this file or not).

But I try to move the same file to the [locale] folder, i get the same error. PS: using latest next and next-intl versions. Do you have any clue on this?

[Christian-Hoeller]

@tecoad follow the docs on next-intl since they have released version 3.0, making this issue obsolete

[igorovic]

This issue is back with next@14.0.4 When I downgrade to next@14.0.3 it works

[dpss77]

This issue is back with next@14.0.4 When I downgrade to next@14.0.3 it works

Yes, thanks.

And additionally adding on top of not-found.tsx : export const dynamic = 'force-dynamic'

[redrose2104]

This issue is back with next@14.0.4 When I downgrade to next@14.0.3 it works

Yes, thanks.

And additionally adding on top of not-found.tsx : export const dynamic = 'force-dynamic'

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' export const dynamic = 'force-dynamic'

import {redirect, usePathname} from "next/navigation";

export default function NotFound() {

const pathname = usePathname()
redirect(`/${pathname.split("/")[1]}/home`)

}

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

[lovelyJason]

我遇到了一样的错误了

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

[tungrix]

I also encountered this issue, and tried various "working" version of next above but also failed.

I tried to add unstable_setRequestLocale(locale) into all of my pages and layout.tsx , however some of my pages use "use client".

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

[lovelyJason]

I also encountered this issue, and tried various "working" version of next above but also failed.

I tried to add unstable_setRequestLocale(locale) into all of my pages and layout.tsx , however some of my pages use "use client".

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

我已经解决了，你的用法不对

[tungrix]

I also encountered this issue, and tried various "working" version of next above but also failed. I tried to add unstable_setRequestLocale(locale) into all of my pages and layout.tsx , however some of my pages use "use client". 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?

[lovelyJason]

I also encountered this issue, and tried various "working" version of next above but also failed. I tried to add unstable_setRequestLocale(locale) into all of my pages and layout.tsx , however some of my pages use "use client". 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

[tungrix]

I also encountered this issue, and tried various "working" version of next above but also failed. I tried to add unstable_setRequestLocale(locale) into all of my pages and layout.tsx , however some of my pages use "use client". 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

When using the setup with i18n routing, next-intlwill currently opt into dynamic rendering when APIs like useTranslations are used in Server Components. This is a limitation that we aim to remove in the future, but as a stopgap solution

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?

[amannn]

If you have 'use client' directly on a page or layout, then there's no need for unstable_setRequestLocale. Static rendering should work out-of-the-box for that entry point.

[tungrix]

If you have 'use client' directly on a page or layout, then there's no need for unstable_setRequestLocale. Static rendering should work out-of-the-box for that entry point.

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-rendering

in my "use client" /model page, my model page is inside /[locale]

[amannn]

Maybe a layout or generateMetadata triggers reading from headers (i.e. it's using RSC and doesn't use unstable_setRequestLocale)?

[tungrix]

RSC

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 Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering. ?

[dmytroyurin]

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 generateStaticParams for blog posts. I tried following this doc: https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#static-rendering and using generateStaticParams for root layout creating routes with available locales but it ends up with tons of errors for every page that refers on this doc - https://nextjs.org/docs/messages/prerender-error In addition, I tried to use unstable_setRequestLocale in the root layout but it did nothing for me. As I understand, the problem is that next-intl uses cookies via next/headers which is not working when combined with generateStaticParams. So I wonder if there are any solutions for this? For now, all I see is that I have to remove generateStaticParams because it does not work with it.

[amannn]

@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 generateStaticParams in the root layout, then all routes rendered with this layout are expected to be static. If that's not what you need, you can probably add generateStaticParams only to relevant pages (or maybe a sub-layout).

[dmytroyurin]

Hey @amannn thanks for the answer! Yes, you're right. Basically, what I need is: that only inside /blog routes generate static params for every /blog/[slug] page. As I said, first I tried to render generateStaticParams inside /blog/[slug]/page.tsx so it gave me "DYNAMIC_SERVER_USAGE" error above. Next, I tried to generate via generateStaticParams all available locales in my route layout (/app/[locale]/layout.tsx) but it gave me more "PRERENDER" errors. The last that I tried it generated via generateStaticParams all available locales inside the /blog/layout.tsx and it worked, but to be honest I'm not sure that it generates all blog slugs correctly. In the build summary, it shows that blog slugs and blog locales were pre-rendered as static HTML (SSG), so I guess it works? How can I check this additionally?

[lovelyJason]

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 export const metadata api, it seems that this cannot be used in client components. But I use next/head and write it in it, but it doesn't work.

[amannn]

@dmytroyurin Cool to hear you were able to figure out a solution! You can check on your blog pages if reasonable cache-control response headers are set. In Next.js App Router, cache response headers and static generation are essentially the same thing—one doesn't come without the other.

@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.

[lovelyJason]

@dmytroyurin Cool to hear you were able to figure out a solution! You can check on your blog pages if reasonable cache-control response headers are set. In Next.js App Router, cache response headers and static generation are essentially the same thing—one doesn't come without the other.

@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?

[issam-seghir]

I've tried every solution mentioned here, but nothing worked for me. However, adding export const dynamic = 'force-dynamic' to every page and layout did the trick!

[lhguerra]

Forcing dynamic rendering cant be a solution! It can be a performance disaster

[ahaapple]

Yesterday I also encountered the issue of Usage of next-intl APIs in Server Components Currently Opts into Dynamic Rendering, and the combination of unstable_setRequestLocale and generateStaticParams. I solved it by using unstable_setRequestLocale. I wrote a blog post summarizing it and the code has been open sourced.

https://www.memfree.me/blog/nextjs-integrate-next-intl

[tiavina-mika]

I still have this issue with not foundpage a year later, is there a solution?

[simplenotezy]

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 force-dynamic

[wxqqh]

I using next: 14.2.15, next-intl: 3.21.1 and this error still occurs. I have carefully reviewed the discussion above, including

1. Add export const dynamic = "force-dynamic" to layout.tsx, page.tsx
2. Use unstable_setRequestLocale in all pages that require static rendering.

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)

[hieupvXmasEve]

I using next: 14.2.15, next-intl: 3.21.1 and this error still occurs. I have carefully reviewed the discussion above, including

1. Add export const dynamic = "force-dynamic" to layout.tsx, page.tsx
2. Use unstable_setRequestLocale in all pages that require static rendering.

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!

[stefanmijicswe]

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.

[amannn]

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 generateStaticParams, but without considering the static rendering guide for next-intl).

That being said, I do really hope to improve the static rendering capability of next-intl out-of-the-box, see more about this in https://github.com/amannn/next-intl/issues/663. If you'd like to help, please upvote the linked Next.js discussion in the issue.