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

Help
1

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 (File Conventions: not-found.js | Next.js)

2

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.
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>
  )
}

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:

Code Example 
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!

3

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