PAYLOAD_PUBLIC_SERVER_URL=http://localhost:4000
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000
are defined within the Nextjs .env file.
?
Repo:
https://github.com/taunhealy/payloadcms_melex_next
page.tsx
import { notFound } from 'next/navigation'
import { RenderBlocks } from '@/components/RenderBlocks'
import React from 'react'
import { fetchPage, fetchPages } from '../../../graphql'
import { Metadata } from 'next'
import { mergeOpenGraph } from '@/seo/mergeOpenGraph'
const Page = async ({ params: { slug } }: { params: { slug: string | string[] } }) => {
const page = await fetchPage(slug)
if (!page) return notFound()
return (
<React.Fragment>
<RenderBlocks blocks={page.layout} />
</React.Fragment>
)
}
export default Page
export async function generateStaticParams() {
const pages = await fetchPages()
return pages.map(({ breadcrumbs }) => ({
slug: breadcrumbs?.[breadcrumbs.length - 1]?.url?.replace(/^\/|\/$/g, '').split('/'),
}))
}
export async function generateMetadata({ params: { slug } }): Promise<Metadata> {
const page = await fetchPage(slug)
const ogImage =
typeof page?.meta?.image === 'object' &&
page?.meta?.image !== null &&
'url' in page?.meta?.image &&
`${process.env.NEXT_PUBLIC_CMS_URL}${page.meta.image.url}`
return {
title: page?.meta?.title || 'Payload CMS',
description: page?.meta?.description,
openGraph: mergeOpenGraph({
title: page?.meta?.title || 'Payload CMS',
description: page?.meta?.description,
url: Array.isArray(slug) ? slug.join('/') : '/',
images: ogImage
? [
{
url: ogImage,
},
]
: undefined,
}),
}
}
Is this where the error lies?
export const fetchPage = async (incomingSlugSegments?: string[]): Promise<Page | null> => {
const slugSegments = incomingSlugSegments || ['home']
const slug = slugSegments.at(-1)
const { data, errors } = await fetch(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
next,
body: JSON.stringify({
query: PAGE,
variables: {
slug,
},
}),
},
).then(res => res.json())
I changed the .env from PAYLOAD to NEXT and it works. Touh the slug isn't loading 'page1'...
I may open a new thread if I can't solve it.
Good morning @taun2160
Hmm, what is the issue you are having?
Hi Chris.
page1:1 GET http://localhost:3000/page1 500 (Internal Server Error)
index.js:634 Uncaught TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
Hmm, that seems like your API hit an error
Where does that fetch occur?
ah wait I see it
Can you log out the value of
${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}
console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)
It's compiling, brb
wait compiling...
- warn Fast Refresh had to perform a full reload due to a runtime error.
- event compiled client and server successfully in 437 ms (606 modules)
- warn Fast Refresh had to perform a full reload due to a runtime error.
- wait compiling...
- warn Fast Refresh had to perform a full reload due to a runtime error.
- event compiled client and server successfully in 304 ms (568 modules)
- wait compiling...
- event compiled successfully in 137 ms (324 modules)
- warn Fast Refresh had to perform a full reload due to a runtime error.
- wait compiling /(pages)/[...slug]/page (client and server)...
- event compiled successfully in 157 ms (282 modules)
- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 149 ms (333 modules)
I think it's working
Nevermind, it just crashed with error:
page1:1 GET http://localhost:3000/page1 500 (Internal Server Error)
index.js:634 Uncaught TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
It's also running very slowly?
Are you able to log the url that is being fetched?
You can also check your network requests in the dev tools
const ogImage =
typeof page?.meta?.image === 'object' &&
page?.meta?.image !== null &&
'url' in page?.meta?.image &&
console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)
That's what I have. SHould it show inthe Vscode console or web browser console?
- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 149 ms (333 modules)
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
- error Error [TypeError]: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11) {
digest: undefined
}
Should be in the browser console I believe
Doesn't look like it:
GET http://localhost:3000/page1 500 (Internal Server Error)
index.js:634 Uncaught TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11413:11)
getServerError @ client.js:1
eval @ index.js:634
setTimeout (async)
hydrate @ index.js:622
await in hydrate (async)
eval @ next-dev.js:48
Promise.then (async)
eval @ next-dev.js:42
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1690375606173:181
options.factory @ webpack.js?ts=1690375606173:716
__webpack_require__ @ webpack.js?ts=1690375606173:37
__webpack_exec__ @ main.js?ts=1690375606173:1138
(anonymous) @ main.js?ts=1690375606173:1139
webpackJsonpCallback @ webpack.js?ts=1690375606173:1388
(anonymous) @ main.js?ts=1690375606173:9
DevTools failed to load source map: Could not load content for chrome-extension://ppkojackhibeogijphhfnamhemklmial/js/page.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
websocket.js:52 [HMR] connected
2DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
websocket.js:52 [HMR] connected
Ya
How can I run both servers at the same time? I've just started the Payload server and the Nextjs server stopped working?
VM49:5 crbug/1173575, non-JS module files deprecated.
Hmm, since this is Next.js related I may not be the best to help out here
@jesschow any ideas on this one?
@taun2160 were you able to solve this? I'm experiencing the same issue. Weirdly enough, I experience this when I have multiple richtext in my page. It's such a hassle that I am not able to navigate to the same slug once I get the error and I needed to create a different page with a different slug.
Anyone got ideas?
I've got no idea. I'm still stuck on this.
If you figure it out please keep us posted.
I've started a new thread -
https://discord.com/channels/967097582721572934/1141709489175793767Star
Discord
online
Get help straight from the Payload team with an Enterprise License.