Classic not found didn't work NextJS v14.2.x

I have a problem with Next.JS's not-found.tsx (using /app)

Here's the 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
    at /vercel/path0/.next/server/chunks/8008.js:20:5350
    at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:185493
    at l (/vercel/path0/.next/server/chunks/8008.js:20:5818)
    at /vercel/path0/.next/server/chunks/8008.js:20:4732
    at /vercel/path0/.next/server/chunks/8008.js:20:4735
    at s (/vercel/path0/.next/server/chunks/8008.js:20:5096)
    at w (/vercel/path0/.next/server/chunks/4326.js:1:9329)
    at eh (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134786)
    at e (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137671)
    at ek (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138145)
 ✓ Generating static pages (5/5)
> Export encountered errors on following paths:
	/_not-found/page: /_not-found

My not-found.tsx (at the root of /app)

import React from "react"
import Link from "next/link"
import { Button, Card, CardBody, CardFooter } from "@nextui-org/react"

export default function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg">
        <CardBody>
          <h2 className="mb-2 text-center text-3xl font-extrabold">
            Not Found
          </h2>
          <h3 className="text-center">Could not find requested resource</h3>
        </CardBody>
        <CardFooter>
          <div className="flex justify-center align-middle">
            <Link href="/" className="mx-2">
              <Button className="bg-[#00699e]">Return Home</Button>
            </Link>
            <Link href="https://...." className="mx-2">
              <Button className="bg-[#fff] text-[#000]">Discord</Button>
            </Link>
            <Link href="https://...." className="mx-2">
              <Button className="bg-[#eb2626]">Twitter / X</Button>
            </Link>
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}

You should also know that in “npm run dev”, it works fine, but as soon as I put it into production (via vercel), I get the error above.

I also use [locale]/ folder, for next-intl

I try the documentation (https://nextjs.org/docs/app/api-reference/file-conventions/not-found)

nextjs.org

File-system conventions: not-found.js | Next.js

API reference for the not-found.js file.

Vercel Alum

Hi, !

It looks like the problem is related to the usage of next-intl in your Server Components, specifically in the not-found.tsx file.

You would need to make a few changes to your not-found.tsx file:

Import the necessary functions from next-intl.
Use the unstable_setRequestLocale function to set the locale.
Wrap your component with the NextIntlClientProvider if you need to use internationalization features within the component.

import React from "react"
import Link from "next/link"
import { Button, Card, CardBody, CardFooter } from "@nextui-org/react"
import { unstable_setRequestLocale } from 'next-intl/server'
import { NextIntlClientProvider } from 'next-intl'
import { useLocale } from 'next-intl'

export default function NotFound() {
  const locale = useLocale()
  unstable_setRequestLocale(locale)

  return (
    <NextIntlClientProvider locale={locale}>
      <div className="flex min-h-screen items-center justify-center">
        <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg">
          <CardBody>
            <h2 className="mb-2 text-center text-3xl font-extrabold">
              Not Found
            </h2>
            <h3 className="text-center">Could not find requested resource</h3>
          </CardBody>
          <CardFooter>
            <div className="flex justify-center align-middle">
              <Link href="/" className="mx-2">
                <Button className="bg-[#00699e]">Return Home</Button>
              </Link>
              <Link href="https://...." className="mx-2">
                <Button className="bg-[#fff] text-[#000]">Discord</Button>
              </Link>
              <Link href="https://...." className="mx-2">
                <Button className="bg-[#eb2626]">Twitter / X</Button>
              </Link>
            </div>
          </CardFooter>
        </Card>
      </div>
    </NextIntlClientProvider>
  )
}

This modification should resolve the error you're encountering during production builds on Vercel. The unstable_setRequestLocale function enables static rendering for the page, which is compatible with static exports.

Additionally, make sure that your next.config.js file is properly configured for next-intl. It should look something like this:

const withNextIntl = require('next-intl/plugin')();

module.exports = withNextIntl({
  // Other Next.js config options...
});

Remember that the unstable_ prefix in the function name indicates that this API might change in future versions, so keep an eye on the next-intl documentation for any updates .

Let us know how you get on!

Hi i have the next.config.tsx Look my code:

import createNextIntlPlugin from "next-intl/plugin"

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/lib/env.js")

const withNextIntl = createNextIntlPlugin()

/** @type {import("next").NextConfig} */
const config = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.discordapp.com",
        pathname: "/**",
      }
    ],
  },
}

export default withNextIntl(config)

My layout.tsx: (i remove the metadata for small code) (if necessary)

import React from "react"
import { Inter } from "next/font/google"
import { cookies } from "next/headers"
import { cn, Image } from "@nextui-org/react"
import { siteConfig } from "config"

import { type LayoutProps } from "@/lib/types"

import { Providers } from "@/app/[locale]/providers"

import "@/styles/globals.css"

import type { Metadata } from "next"
import Script from "next/script"
import { GoogleAnalytics } from "@next/third-parties/google"
import { NextIntlClientProvider, useMessages } from "next-intl"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
})

export default function RootLayout({ children, params }: LayoutProps) {
  const messages = useMessages()

  return (
    <html lang={params.locale} suppressHydrationWarning>
      <body
        className={cn(
          "min-h-dvh bg-background font-sans text-foreground",
          inter.variable,
        )}
      >
        <NextIntlClientProvider messages={messages}>
          <Providers cookies={cookies().toString()}>{children}</Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

My providers.tsx: (if necessary)

"use client"

import { useRouter } from "next/navigation"
import { NextUIProvider } from "@nextui-org/react"
import { SessionProvider } from "next-auth/react"
import { ThemeProvider } from "next-themes"
import { Toaster } from "sonner"

import { TRPCReactProvider } from "@/lib/trpc/react"

type ProviderProps = {
  children: React.ReactNode
  cookies: string
}

export const Providers = (props: ProviderProps) => {
  const router = useRouter()

  return (
    <SessionProvider refetchOnWindowFocus={false}>
      <TRPCReactProvider cookies={props.cookies}>
        <NextUIProvider navigate={router.push}>
          <ThemeProvider>{props.children}</ThemeProvider>
        </NextUIProvider>
        <Toaster richColors closeButton />
      </TRPCReactProvider>
    </SessionProvider>
  )
}

This topic is closed. It no longer accepts new replies.

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 at /vercel/path0/.next/server/chunks/8008.js:20:5350 at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:185493 at l (/vercel/path0/.next/server/chunks/8008.js:20:5818) at /vercel/path0/.next/server/chunks/8008.js:20:4732 at /vercel/path0/.next/server/chunks/8008.js:20:4735 at s (/vercel/path0/.next/server/chunks/8008.js:20:5096) at w (/vercel/path0/.next/server/chunks/4326.js:1:9329) at eh (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134786) at e (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137671) at ek (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138145) ✓ Generating static pages (5/5) > Export encountered errors on following paths: /_not-found/page: /_not-found

import React from "react" import Link from "next/link" import { Button, Card, CardBody, CardFooter } from "@nextui-org/react" export default function NotFound() { return ( <div className="flex min-h-screen items-center justify-center"> <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg"> <CardBody> <h2 className="mb-2 text-center text-3xl font-extrabold"> Not Found </h2> <h3 className="text-center">Could not find requested resource</h3> </CardBody> <CardFooter> <div className="flex justify-center align-middle"> <Link href="/" className="mx-2"> <Button className="bg-[#00699e]">Return Home</Button> </Link> <Link href="https://...." className="mx-2"> <Button className="bg-[#fff] text-[#000]">Discord</Button> </Link> <Link href="https://...." className="mx-2"> <Button className="bg-[#eb2626]">Twitter / X</Button> </Link> </div> </CardFooter> </Card> </div> ) }

import React from "react" import Link from "next/link" import { Button, Card, CardBody, CardFooter } from "@nextui-org/react" import { unstable_setRequestLocale } from 'next-intl/server' import { NextIntlClientProvider } from 'next-intl' import { useLocale } from 'next-intl' export default function NotFound() { const locale = useLocale() unstable_setRequestLocale(locale) return ( <NextIntlClientProvider locale={locale}> <div className="flex min-h-screen items-center justify-center"> <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg"> <CardBody> <h2 className="mb-2 text-center text-3xl font-extrabold"> Not Found </h2> <h3 className="text-center">Could not find requested resource</h3> </CardBody> <CardFooter> <div className="flex justify-center align-middle"> <Link href="/" className="mx-2"> <Button className="bg-[#00699e]">Return Home</Button> </Link> <Link href="https://...." className="mx-2"> <Button className="bg-[#fff] text-[#000]">Discord</Button> </Link> <Link href="https://...." className="mx-2"> <Button className="bg-[#eb2626]">Twitter / X</Button> </Link> </div> </CardFooter> </Card> </div> </NextIntlClientProvider> ) }

import createNextIntlPlugin from "next-intl/plugin" /** * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful * for Docker builds. */ await import("./src/lib/env.js") const withNextIntl = createNextIntlPlugin() /** @type {import("next").NextConfig} */ const config = { images: { remotePatterns: [ { protocol: "https", hostname: "cdn.discordapp.com", pathname: "/**", } ], }, } export default withNextIntl(config)

import React from "react" import { Inter } from "next/font/google" import { cookies } from "next/headers" import { cn, Image } from "@nextui-org/react" import { siteConfig } from "config" import { type LayoutProps } from "@/lib/types" import { Providers } from "@/app/[locale]/providers" import "@/styles/globals.css" import type { Metadata } from "next" import Script from "next/script" import { GoogleAnalytics } from "@next/third-parties/google" import { NextIntlClientProvider, useMessages } from "next-intl" const inter = Inter({ subsets: ["latin"], variable: "--font-sans", }) export default function RootLayout({ children, params }: LayoutProps) { const messages = useMessages() return ( <html lang={params.locale} suppressHydrationWarning> <body className={cn( "min-h-dvh bg-background font-sans text-foreground", inter.variable, )} > <NextIntlClientProvider messages={messages}> <Providers cookies={cookies().toString()}>{children}</Providers> </NextIntlClientProvider> </body> </html> ) }

"use client" import { useRouter } from "next/navigation" import { NextUIProvider } from "@nextui-org/react" import { SessionProvider } from "next-auth/react" import { ThemeProvider } from "next-themes" import { Toaster } from "sonner" import { TRPCReactProvider } from "@/lib/trpc/react" type ProviderProps = { children: React.ReactNode cookies: string } export const Providers = (props: ProviderProps) => { const router = useRouter() return ( <SessionProvider refetchOnWindowFocus={false}> <TRPCReactProvider cookies={props.cookies}> <NextUIProvider navigate={router.push}> <ThemeProvider>{props.children}</ThemeProvider> </NextUIProvider> <Toaster richColors closeButton /> </TRPCReactProvider> </SessionProvider> ) }