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:

1Error: 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-rendering2    at /vercel/path0/.next/server/chunks/8008.js:20:53503    at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:1854934    at l (/vercel/path0/.next/server/chunks/8008.js:20:5818)5    at /vercel/path0/.next/server/chunks/8008.js:20:47326    at /vercel/path0/.next/server/chunks/8008.js:20:47357    at s (/vercel/path0/.next/server/chunks/8008.js:20:5096)8    at w (/vercel/path0/.next/server/chunks/4326.js:1:9329)9    at eh (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134786)10    at e (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:137671)11    at ek (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:138145)12 ✓ Generating static pages (5/5)13> Export encountered errors on following paths:14	/_not-found/page: /_not-found

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

1import React from "react"2import Link from "next/link"3import { Button, Card, CardBody, CardFooter } from "@nextui-org/react"45export default function NotFound() {6  return (7    <div className="flex min-h-screen items-center justify-center">8      <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg">9        <CardBody>10          <h2 className="mb-2 text-center text-3xl font-extrabold">11            Not Found12          </h2>13          <h3 className="text-center">Could not find requested resource</h3>14        </CardBody>15        <CardFooter>16          <div className="flex justify-center align-middle">17            <Link href="/" className="mx-2">18              <Button className="bg-[#00699e]">Return Home</Button>19            </Link>20            <Link href="https://...." className="mx-2">21              <Button className="bg-[#fff] text-[#000]">Discord</Button>22            </Link>23            <Link href="https://...." className="mx-2">24              <Button className="bg-[#eb2626]">Twitter / X</Button>25            </Link>26          </div>27        </CardFooter>28      </Card>29    </div>30  )31}32

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)

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.

1import React from "react"2import Link from "next/link"3import { Button, Card, CardBody, CardFooter } from "@nextui-org/react"4import { unstable_setRequestLocale } from 'next-intl/server'5import { NextIntlClientProvider } from 'next-intl'6import { useLocale } from 'next-intl'78export default function NotFound() {9  const locale = useLocale()10  unstable_setRequestLocale(locale)1112  return (13    <NextIntlClientProvider locale={locale}>14      <div className="flex min-h-screen items-center justify-center">15        <Card className="w-full max-w-md rounded-[25px] p-6 shadow-lg">16          <CardBody>17            <h2 className="mb-2 text-center text-3xl font-extrabold">18              Not Found19            </h2>20            <h3 className="text-center">Could not find requested resource</h3>21          </CardBody>22          <CardFooter>23            <div className="flex justify-center align-middle">24              <Link href="/" className="mx-2">25                <Button className="bg-[#00699e]">Return Home</Button>26              </Link>27              <Link href="https://...." className="mx-2">28                <Button className="bg-[#fff] text-[#000]">Discord</Button>29              </Link>30              <Link href="https://...." className="mx-2">31                <Button className="bg-[#eb2626]">Twitter / X</Button>32              </Link>33            </div>34          </CardFooter>35        </Card>36      </div>37    </NextIntlClientProvider>38  )39}

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:

1const withNextIntl = require('next-intl/plugin')();23module.exports = withNextIntl({4  // Other Next.js config options...5});

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:

1import createNextIntlPlugin from "next-intl/plugin"23/**4 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful5 * for Docker builds.6 */7await import("./src/lib/env.js")89const withNextIntl = createNextIntlPlugin()1011/** @type {import("next").NextConfig} */12const config = {13  images: {14    remotePatterns: [15      {16        protocol: "https",17        hostname: "cdn.discordapp.com",18        pathname: "/**",19      }20    ],21  },22}2324export default withNextIntl(config)25

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

1import React from "react"2import { Inter } from "next/font/google"3import { cookies } from "next/headers"4import { cn, Image } from "@nextui-org/react"5import { siteConfig } from "config"67import { type LayoutProps } from "@/lib/types"89import { Providers } from "@/app/[locale]/providers"1011import "@/styles/globals.css"1213import type { Metadata } from "next"14import Script from "next/script"15import { GoogleAnalytics } from "@next/third-parties/google"16import { NextIntlClientProvider, useMessages } from "next-intl"1718const inter = Inter({19  subsets: ["latin"],20  variable: "--font-sans",21})2223export default function RootLayout({ children, params }: LayoutProps) {24  const messages = useMessages()2526  return (27    <html lang={params.locale} suppressHydrationWarning>28      <body29        className={cn(30          "min-h-dvh bg-background font-sans text-foreground",31          inter.variable,32        )}33      >34        <NextIntlClientProvider messages={messages}>35          <Providers cookies={cookies().toString()}>{children}</Providers>36        </NextIntlClientProvider>37      </body>38    </html>39  )40}41

My providers.tsx: (if necessary)

1"use client"23import { useRouter } from "next/navigation"4import { NextUIProvider } from "@nextui-org/react"5import { SessionProvider } from "next-auth/react"6import { ThemeProvider } from "next-themes"7import { Toaster } from "sonner"89import { TRPCReactProvider } from "@/lib/trpc/react"1011type ProviderProps = {12  children: React.ReactNode13  cookies: string14}1516export const Providers = (props: ProviderProps) => {17  const router = useRouter()1819  return (20    <SessionProvider refetchOnWindowFocus={false}>21      <TRPCReactProvider cookies={props.cookies}>22        <NextUIProvider navigate={router.push}>23          <ThemeProvider>{props.children}</ThemeProvider>24        </NextUIProvider>25        <Toaster richColors closeButton />26      </TRPCReactProvider>27    </SessionProvider>28  )29}30