[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # Classic not found didn't work NextJS v14.2.x 135 views · 0 likes · 3 posts Devkiliozofficiel (@devkiliozofficiel) · 2024-08-24 I have a problem with Next.JS's not-found.tsx (using /app) Here's the error: ```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 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) Pauline P. Narvas (@pawlean) · 2024-08-25 Hi, @devkiliozofficiel! 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: 1. Import the necessary functions from next-intl. 2. Use the `unstable_setRequestLocale` function to set the locale. 3. Wrap your component with the `NextIntlClientProvider` if you need to use internationalization features within the component. [details="Code Example"] ``` 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> ) } ``` [/details] 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: [details="Code Example"] ``` const withNextIntl = require('next-intl/plugin')(); module.exports = withNextIntl({ // Other Next.js config options... }); ``` [/details] 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! Devkiliozofficiel (@devkiliozofficiel) · 2024-08-25 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> ) } ```