Next.js Discord

Discord Forum

[...not-found] page

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
# Subject: Issue with Next.js 14 App Router - 'Not-Found' Page Not Showing in Production and Error in Local Environment

I am currently developing a project using Next.js 14 and utilizing the app router feature. I have encountered a problem with the 'not-found' page in my application:

Production Environment Issue: The 'not-found' page, which should display when a user navigates to an undefined route, is not visible in the production environment.

Local Environment Error: Although the 'not-found' page works as expected in the local environment, it generates the following error:

[Insert the specific error message you're receiving]

Folder Structure: My project's folder structure is as follows:

[Provide details of your folder structure, specifically how you have structured the 'not-found' page and related routing components]

4 Replies

Asiatic LionOP
import Link from "next/link";
import { Locale } from "../../../../../i18n-config";
import { getDictionary } from "../../../../../get-dictionary";

export default async function NotFound({ params: { lang } }: { params: { lang: Locale } }) {
  const { notFound } = await getDictionary(lang);

  return (
    <div className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
      <div className="text-center">
        <p className="text-base font-semibold text-indigo-600">{notFound.head}</p>
        <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">{notFound.subhead}</h1>
        <p className="mt-6 text-base leading-7 text-gray-600">{notFound.desc}</p>
        <div className="mt-10 flex items-center justify-center gap-x-6">
          <Link
            href={`/${lang}`}
            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            {notFound.button}
          </Link>
          <Link href={`/${lang}/contact`} className="text-sm font-semibold text-gray-900">
            {notFound.contact} <span aria-hidden="true">&larr;</span>
          </Link>
        </div>
      </div>
    </div>
  );
}
this is my component
@Ray try changing the type to this ts export default async function NotFound({ params }: { params: { lang: string; "not-found": string[] }}) {}
Asiatic LionOP
but in local everything is fine only in production i dont see not found page