#notFound() not working in app router. Error thinks I am using pages router.

1 messages · Page 1 of 1 (latest)

atomic narwhal
#

I have the following code in /src/spp/page.tsx:

import { getPayload } from 'payload'
import config from '@payload-config'
import { notFound } from 'next/navigation'

const payload = await getPayload({ config })

const settings = await payload.findGlobal({ slug: 'settings' })
const pageQueryRes = await payload.find({
  collection: 'pages',
  where: {
    slug: {
      equals: '',
    },
  },
})

if (pageQueryRes.docs.length == 1) {
  // TODO: Implement notFound
  notFound()
}

const page = pageQueryRes.docs[0]

export const metadata = {
  title: settings?.siteTitle || 'Test',
  description: settings?.siteDescription || 'Generated by Next.js',
}

export default async function Page() {
  console.log(page)
  return <div></div>
}

However when the notFound() function is invoked I get the following error:

Error: Next.js navigation API is not allowed to be used in Pages Router.
    at notFound (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/not-found.js:28:19)
    at eval (webpack-internal:///(rsc)/./src/app/(frontend)/page.tsx:32:62)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
livid mirageBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frosty roost
atomic narwhal
#

thanks

frosty roost
#

You shouldn’t do anything in the root scope (outside page component, generateMetadata etc)

atomic narwhal
#

And if I do datafetching in both scopes should I be redefining "payload" in both scopes or can I define it in the root scope and then use it in the component?

frosty roost
atomic narwhal
#

Ahh I see

frosty roost
atomic narwhal
livid mirageBOT