Custom not_found page

Developing with Prismic
1

Hi,
i want to create a custom error_not_found_page. I follow this post on the blog for multilanguage Next.js Internationalization (i18n) Tutorial [App Router] with which I made this folder structure

image
image490×582 27.9 KB

I created a not-found.tsx page with a simple text.
When I try to navigate to not existing page my expectation is to show the content of not-found page but the result is

image
image1956×1104 121 KB

How I implement a custom 404 page?

Thanks

1 Like
2

same problem here. If I remove prismic integration it works just fine :confused:

3

Hi @pasalino, @davideghz, sorry for the delay getting back to you!

I tried to reproduce your issue but unfortunately, I'm not able to reproduce it with Next 13, 14, and 15 using Node 22.

Are you able to share more details on how you encounter the issue? These info could help:

  • Next.js version
  • Node version
  • package.json content
  • A minimal reproduction

Let us know about it, happy to help you troubleshoot this issue further,
Lucie

4

Hi,

You will probably need 'catch-all' route, at least that's how I solved it:

image
image386×144 5.95 KB

import {notFound} from 'next/navigation';

const CatchAll = () => notFound();
export default CatchAll;
5

Here the details:

node version: v21.6.1
nextjs version: 14.2.4

package.json

{
  "name": "myproject",
  "version": "0.0.0",
  "private": true,
  "author": "davideghz",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@prismicio/client": "^7.11.0",
    "@prismicio/next": "^1.7.0",
    "@prismicio/react": "^2.9.0",
    "bootstrap": "^5.3.3",
    "clsx": "2.1.1",
    "next": "14.2.4",
    "react": "18.3.1",
    "react-bootstrap": "^2.10.5",
    "react-dom": "18.3.1",
    "sass": "^1.80.6",
    "swiper": "^11.1.14"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.53",
    "@types/node": "22.8.0",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "autoprefixer": "10.4.20",
    "concurrently": "9.0.1",
    "eslint": "8.57.0",
    "eslint-config-next": "14.2.4",
    "postcss": "8.4.47",
    "prettier": "3.3.3",
    "slice-machine-ui": "^2.9.1",
    "typescript": "5.6.3"
  }
}

app folder structure

image
image516×714 34.3 KB

[lang]/page.tsx content

export async function generateMetadata(
  props: HomePageProps,
): Promise<Metadata> {
  const client = createClient()
  const page = await client
    .getByUID('page', 'home', { lang: props.params.lang })
    .catch(() => notFound())

  return {
    title: asText(page.data.title),
    description: page.data.meta_description,
    openGraph: {
      title: page.data.meta_title ?? undefined,
      images: [{ url: page.data.meta_image.url ?? '' }],
    },
  }
}

export default async function Homepage(props: HomePageProps) {
  const client = createClient()
  const page = await client
    .getByUID('page', 'home', { lang: props.params.lang })
    .catch(() => notFound())
  return (
    <>
      <SliceZone slices={page.data.slices} components={components} />
    </>
  )
}

export async function generateStaticParams() {
  const client = createClient()

  // ⬇️ Note this line using a '*' for the lang parameter
  const pages = await client.getAllByType('page', {
    predicates: [prismic.filter.at('my.page.uid', 'home')],
    lang: '*',
  })

  return pages.map((page) => ({ uid: page.uid, lang: page.lang }))
}

I tried the solution proposed by lihbr with no luck.

Let me know if you need more details about other files.

Thank you!

6

Hi @davideghz, sorry for the delay getting back to this thread,

Maybe a stupid question, but can you confirm you have a not-found.tsx page in your folder structure? It's not showing in the above screenshot :thinking: