.
Has anyone encounter the issue before
Am developing a project with Next + sanity after deployment i discovered that the all page slug is showing 404 pages , so i build on CLI and see that the page slug is not build
Am also all my images are not showing expect the bg image
Please how can i resolve it
24 Replies
What do you mean by "page slug is not build"? Are you able to share your build logs or a reproduction?
I mean pages like post/[slug] page
What do you mean by it won't build? Are you able to share your build logs or a reproduction?
If you do a standard next build does it work as expected?
Yeah thanks very much for the support
Where i have issues is only the page slug page like sanity embedded studio app/admin, post/slug and the images that are not showing
Have tried using "npx next build" locally, and use "npx serve@latest out" to run , the post slug page and the images
These are the configurations i did
Am using nextjs static export for deployment
so i configured my nextjs.config.js as follows
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: "export",
experimental: {
appDir: true,
},
images: {
remotePatterns: [
{
protocol: "https",
hostname: "cdn.sanity.io",
port: "",
},
],
},
};
module.exports = nextConfig;
Then, have tried using only
domains: ['cdn.sanity.io'], in the image object is not still working
I will await your response thanks 🙏
These is my log build
If you're using a static export, the next/image component won't work, nor will dynamic routes. You need to use
@cloudflare/next-on-pages
.
In your Pages project settings in the Cloudflare dashboard, set your build command to npx @cloudflare/next-on-pages
and set your output directory to .vercel/output/static
.okay Thanks
i will implement and feedback
I got this error in the build log after doing this
20:55:03.836 ⚡️ The Vercel build (
20:55:03.860 Failed: Error while executing user command. Exited with error code: 1 20:55:03.873 Failed: build command exited with code: 1 20:55:05.374 Failed: error occurred while running build command This is my nextconfig file /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, output: ".vercel/output/static", experimental: { appDir: true, // sanity plugin input request // esmExternals: 'loose' }, images: { // domains: ['cdn.sanity.io'], // loader: "custom", // loaderFile: './my-loader.ts', remotePatterns: [ { protocol: "https", hostname: "cdn.sanity.io", port: "", }, ], }, }; module.exports = nextConfig;
npx vercel build
) command failed. For more details see the Vercel logs above.
20:55:03.837 ⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
20:55:03.83720:55:03.860 Failed: Error while executing user command. Exited with error code: 1 20:55:03.873 Failed: build command exited with code: 1 20:55:05.374 Failed: error occurred while running build command This is my nextconfig file /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, output: ".vercel/output/static", experimental: { appDir: true, // sanity plugin input request // esmExternals: 'loose' }, images: { // domains: ['cdn.sanity.io'], // loader: "custom", // loaderFile: './my-loader.ts', remotePatterns: [ { protocol: "https", hostname: "cdn.sanity.io", port: "", }, ], }, }; module.exports = nextConfig;
Remove the output entry from your next.config.js
okay
i should remove all this path ?
output: ".vercel/output/static",
yes you do not need an entry for output in your next.config.js
oohk
This is the next error log
06:31:43.308 ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
06:31:43.308 ⚡️
06:31:43.309 ⚡️ The following routes were not configured to run with the Edge Runtime:
06:31:43.309 ⚡️ - /[...not_found]
06:31:43.309 ⚡️ - /admin/[[...index]]
06:31:43.309 ⚡️ - /post/[slug]/opengraph-image
06:31:43.309 ⚡️ - /post/[slug]
06:31:43.309 ⚡️
06:31:43.310 ⚡️ Please make sure that all your non-static routes export the following edge runtime route segment config:
06:31:43.310 ⚡️ export const runtime = 'edge';
06:31:43.310 ⚡️
06:31:43.310 ⚡️ You can read more about the Edge Runtime on the Next.js documentation:
06:31:43.310 ⚡️ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
06:31:43.310
06:31:43.333 Failed: Error while executing user command. Exited with error code: 1 06:31:43.343 Failed: build command exited with code: 1 06:31:44.308 Failed: error occurred while running build command
06:31:43.333 Failed: Error while executing user command. Exited with error code: 1 06:31:43.343 Failed: build command exited with code: 1 06:31:44.308 Failed: error occurred while running build command
Rendering: Edge and Node.js Runtimes
Learn about the switchable runtimes (Edge and Node.js) in Next.js.
Have you opted your routes into the edge runtime or if they're being SSG'd, checked if you're running into the edge conditions described in our documentation in the next-on-pages repository?
what do you mean by SSG'd ?
yes, i only install this
npm install --save-dev @cloudflare/next-on-pages
And i discover this on the website (https://blog.cloudflare.com/next-on-pages/)
experimental: {
runtime: 'experimental-edge',
},
can it work for me ?
The Cloudflare Blog
And here's another one: the Next.js Edge Runtime becomes the fourth...
You can now deploy SSR Next.js applications to the Cloudflare Pages platform ⚡️
What do you mean by
Have you opted your routes into the edge runtime
what is did was
I included this line of code in all my page route
export const runtime = "edge";
Buh still not working
Please how can i resolve this issue, it has been taking some days now
I need to deliver the project
Help pls 🙏
do you get a different error when you do that?
yes
totally different thing entirely
...can you send it??
Okay I will need to run it again before have cancelled it
I wants to confirm pls, Do you mean when i add this to my nextconfig file
experimental: {
runtime: 'experimental-edge',
},
?
no, when you add the edge runtime export to your routes
okay
This was the last error i got on adding edge runtime export to my routes
07:47:30.026 ✨ Success! Uploaded 22 files (68 already uploaded) (1.59 sec)
07:47:30.026
07:47:30.380 ✨ Upload complete! 07:47:32.748 Success: Assets published! 07:47:35.410 Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)
07:47:30.380 ✨ Upload complete! 07:47:32.748 Success: Assets published! 07:47:35.410 Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)
You could upgrade to Workers/Pages Paid for $5/mo for a high limit, or reduce the size of your app - likely meaning replacing chonky dependencies with lighter-weight alternatives
okay
Please can you explain any way i can manage my functions for a lesser production files