After setting the environment variable NEXT_FORCE_EDGE_IMAGES= true, all the images loaded from a remote CMS are not able to be loaded with 500 errors.
This is very weird as the images were working properly yesterday. After I made new deploys, they are not working even though I published the deploy that was working yesterday.
`_redirects`
```
# Paste content of your `_redirects` file here
```
Your next.config.js file
`next.config.js`
```js
const sitemap = require('./plugins/sitemap');
// const socialImages = require('./plugins/socialImages'); TODO: failing to run on Netlify
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
// By default, Next.js removes the trailing slash. One reason this would be good
// to include is by default, the `path` property of the router for the homepage
// is `/` and by using that, would instantly create a redirect
trailingSlash: true,
// By enabling verbose logging, it will provide additional output details for
// diagnostic purposes. By default is set to false.
// verbose: true,
env: {
// The image directory for open graph images will be saved at the location above
// with `public` prepended. By default, images will be saved at /public/images/og
// and available at /images/og. If changing, make sure to update the .gitignore
OG_IMAGE_DIRECTORY: '/images/og',
// By default, only render this number of post pages ahead of time, otherwise
// the rest will be rendered on-demand
POSTS_PRERENDER_COUNT: 5,
WORDPRESS_GRAPHQL_ENDPOINT: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
WORDPRESS_HOSTNAME: process.env.WORDPRESS_HOSTNAME,
WORDPRESS_PLUGIN_SEO: parseEnvValue(process.env.WORDPRESS_PLUGIN_SEO, false),
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: process.env.WORDPRESS_HOSTNAME,
port: '',
pathname: '/wp-content/uploads/**',
},
],
},
async redirects() {
return [
{
source: '/services/',
destination: '/services/advanced-recursive-auric-clearing/',
permanent: true,
},
];
},
};
module.exports = () => {
const plugins = [sitemap];
return plugins.reduce((acc, plugin) => plugin(acc), nextConfig);
};
/**
* parseEnv
* @description Helper function to check if a variable is defined and parse booelans
*/
function parseEnvValue(value, defaultValue) {
if (typeof value === 'undefined') return defaultValue;
if (value === true || value === 'true') return true;
if (value === false || value === 'false') return false;
return value;
}
```
generated .next JSON files
```
# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.
```
sarahetter
commented
1 year ago
Summary
After setting the environment variable NEXT_FORCE_EDGE_IMAGES= true, all the images loaded from a remote CMS are not able to be loaded with 500 errors.
This is very weird as the images were working properly yesterday. After I made new deploys, they are not working even though I published the deploy that was working yesterday.
A link to a reproduction repository
https://github.com/AresTG2612/energetic-body-renewal
Expected Result
The images are loaded with the type of WebP
Actual Result
The images return 500 errors
Steps to reproduce
Next Runtime version
v4.38.1
Is your issue related to the
appdirectory?appdirectoryMore information about your build
netlify.toml)What OS are you using?
Mac OS
Your netlify.toml file
`netlify.toml`
```toml [build] command = "pnpm build" publish = ".next" [[plugins]] package = "@netlify/plugin-nextjs" ```Your public/_redirects file
`_redirects`
``` # Paste content of your `_redirects` file here ```Your
next.config.jsfile`next.config.js`
```js const sitemap = require('./plugins/sitemap'); // const socialImages = require('./plugins/socialImages'); TODO: failing to run on Netlify /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, // By default, Next.js removes the trailing slash. One reason this would be good // to include is by default, the `path` property of the router for the homepage // is `/` and by using that, would instantly create a redirect trailingSlash: true, // By enabling verbose logging, it will provide additional output details for // diagnostic purposes. By default is set to false. // verbose: true, env: { // The image directory for open graph images will be saved at the location above // with `public` prepended. By default, images will be saved at /public/images/og // and available at /images/og. If changing, make sure to update the .gitignore OG_IMAGE_DIRECTORY: '/images/og', // By default, only render this number of post pages ahead of time, otherwise // the rest will be rendered on-demand POSTS_PRERENDER_COUNT: 5, WORDPRESS_GRAPHQL_ENDPOINT: process.env.WORDPRESS_GRAPHQL_ENDPOINT, WORDPRESS_HOSTNAME: process.env.WORDPRESS_HOSTNAME, WORDPRESS_PLUGIN_SEO: parseEnvValue(process.env.WORDPRESS_PLUGIN_SEO, false), }, images: { remotePatterns: [ { protocol: 'https', hostname: process.env.WORDPRESS_HOSTNAME, port: '', pathname: '/wp-content/uploads/**', }, ], }, async redirects() { return [ { source: '/services/', destination: '/services/advanced-recursive-auric-clearing/', permanent: true, }, ]; }, }; module.exports = () => { const plugins = [sitemap]; return plugins.reduce((acc, plugin) => plugin(acc), nextConfig); }; /** * parseEnv * @description Helper function to check if a variable is defined and parse booelans */ function parseEnvValue(value, defaultValue) { if (typeof value === 'undefined') return defaultValue; if (value === true || value === 'true') return true; if (value === false || value === 'false') return false; return value; } ```Builds logs (or link to your logs)
Build logs
``` 12:46:43 PM: Netlify Build 12:46:43 PM: ──────────────────────────────────────────────────────────────── 12:46:43 PM: 12:46:43 PM: ❯ Version 12:46:43 PM: @netlify/build 29.12.1 12:46:43 PM: 12:46:43 PM: ❯ Flags 12:46:43 PM: baseRelDir: true 12:46:43 PM: buildId: 649cf070c6ce19000815c702 12:46:43 PM: deployId: 649cf070c6ce19000815c704 12:46:43 PM: tracing: 12:46:43 PM: enabled: 'false' 12:46:43 PM: host: 10.65.80.33 12:46:43 PM: parentSpanId: e1653a126260b7a3 12:46:43 PM: traceFlags: '00' 12:46:43 PM: traceId: ed94756269393b73926d21af85d055d3 12:46:43 PM: 12:46:43 PM: ❯ Current directory 12:46:43 PM: /opt/build/repo 12:46:43 PM: 12:46:43 PM: ❯ Config file 12:46:43 PM: /opt/build/repo/netlify.toml 12:46:43 PM: 12:46:43 PM: ❯ Context 12:46:43 PM: production 12:46:43 PM: 12:46:43 PM: ❯ Using Next.js Runtime - v4.38.1 12:46:44 PM: 12:46:44 PM: @netlify/plugin-nextjs (onPreBuild event) 12:46:44 PM: ──────────────────────────────────────────────────────────────── 12:46:44 PM: 12:46:44 PM: Next.js cache restored. 12:46:44 PM: Netlify configuration property build.environment.NEXT_PRIVATE_TARGET value changed. 12:46:44 PM: 12:46:44 PM: (@netlify/plugin-nextjs onPreBuild completed in 145ms) 12:46:44 PM: 12:46:44 PM: build.command from netlify.toml 12:46:44 PM: ──────────────────────────────────────────────────────────────── 12:46:44 PM: 12:46:44 PM: $ pnpm build 12:46:44 PM: > energetic-body-renewal@0.1.0 build /opt/build/repo 12:46:44 PM: > next build 12:46:45 PM: info - Linting and checking validity of types... 12:46:47 PM: info - Creating an optimized production build... 12:46:58 PM: Successfully created: sitemap.xml 12:47:03 PM: info - Compiled successfully 12:47:03 PM: info - Collecting page data... 12:47:07 PM: Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`. This does not opt-out pages with `getStaticProps` 12:47:07 PM: Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization 12:47:19 PM: info - Generating static pages (0/5) 12:47:22 PM: info - Generating static pages (1/5) 12:47:22 PM: info - Generating static pages (2/5) 12:47:23 PM: info - Generating static pages (3/5) 12:47:25 PM: info - Generating static pages (5/5) 12:47:25 PM: info - Finalizing page optimization... 12:47:25 PM: Route (pages) Size First Load JS 12:47:25 PM: ┌ ● / (ISR: 10 Seconds) (3773 ms) 54.1 kB 273 kB 12:47:25 PM: ├ /_app 0 B 148 kB 12:47:25 PM: ├ ● /[slugParent]/[[...slugChild]] 1.61 kB 193 kB 12:47:25 PM: ├ ● /404 (2931 ms) 591 B 192 kB 12:47:25 PM: ├ ● /500 (2936 ms) 640 B 192 kB 12:47:25 PM: ├ λ /api/contact 0 B 148 kB 12:47:25 PM: └ ● /services/[slug] (ISR: 10 Seconds) (6016 ms) 2.57 kB 225 kB 12:47:25 PM: ├ /services/advanced-recursive-karmic-clearing (4151 ms) 12:47:25 PM: └ /services/advanced-recursive-auric-clearing (1865 ms) 12:47:25 PM: + First Load JS shared by all 148 kB 12:47:25 PM: ├ chunks/framework-ac88a2a245aea9ab.js 45.2 kB 12:47:25 PM: ├ chunks/main-cf1d0f8b1013f0fd.js 27.2 kB 12:47:25 PM: ├ chunks/pages/_app-76ee9a18e5ce95eb.js 74.4 kB 12:47:25 PM: ├ chunks/webpack-6ef43a8d4a395f49.js 999 B 12:47:25 PM: └ css/14418670b4c7d030.css 543 B 12:47:25 PM: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) 12:47:25 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) 12:47:25 PM: (ISR) incremental static regeneration (uses revalidate in getStaticProps) 12:47:25 PM: 12:47:25 PM: (build.command completed in 41.3s) 12:47:25 PM: 12:47:25 PM: @netlify/plugin-nextjs (onBuild event) 12:47:25 PM: ──────────────────────────────────────────────────────────────── 12:47:25 PM: 12:47:26 PM: Moving static page files to serve from CDN... 12:47:26 PM: Moved 4 files 12:47:26 PM: The following routes use revalidate values of under 60 seconds, which is not supported. 12:47:26 PM: They will use a revalidate time of 60 seconds instead. 12:47:26 PM: ┌─────────┬────────────────────────────────────────────────┬────────────┐ 12:47:26 PM: │ (index) │ Route │ Revalidate │ 12:47:26 PM: ├─────────┼────────────────────────────────────────────────┼────────────┤ 12:47:26 PM: │ 0 │ '/' │ 10 │ 12:47:26 PM: │ 1 │ '/services/advanced-recursive-karmic-clearing' │ 10 │ 12:47:26 PM: │ 2 │ '/services/advanced-recursive-auric-clearing' │ 10 │ 12:47:26 PM: └─────────┴────────────────────────────────────────────────┴────────────┘ 12:47:26 PM: Using Netlify Edge Functions for image format detection. Set env var NEXT_DISABLE_EDGE_IMAGES=true to disable. 12:47:26 PM: ✨ Deploying middleware and functions to Netlify Edge Functions ✨ 12:47:26 PM: Netlify configuration property redirects value changed to [ 12:47:26 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/image/*', 12:47:26 PM: query: { url: ':url', w: ':width', q: ':quality' }, 12:47:26 PM: to: '/_ipx/w_:width,q_:quality/:url', 12:47:26 PM: status: 301 12:47:26 PM: }, 12:47:26 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 }, 12:47:26 PM: { 12:47:26 PM: from: '/api/contact', 12:47:26 PM: to: '/.netlify/functions/_api_contact-handler', 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/api/*', 12:47:26 PM: to: '/.netlify/functions/___netlify-handler', 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/android-chrome-192x192.png', 12:47:26 PM: to: '/android-chrome-192x192.png', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/android-chrome-512x512.png', 12:47:26 PM: to: '/android-chrome-512x512.png', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/apple-touch-icon.png', 12:47:26 PM: to: '/apple-touch-icon.png', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/favicon-16x16.png', 12:47:26 PM: to: '/favicon-16x16.png', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/favicon-32x32.png', 12:47:26 PM: to: '/favicon-32x32.png', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/favicon.ico', 12:47:26 PM: to: '/favicon.ico', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/robots.txt', 12:47:26 PM: to: '/robots.txt', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/site.webmanifest', 12:47:26 PM: to: '/site.webmanifest', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/sitemap.jpg', 12:47:26 PM: to: '/sitemap.jpg', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/sitemap.xml', 12:47:26 PM: to: '/sitemap.xml', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/images/1star.svg', 12:47:26 PM: to: '/images/1star.svg', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/images/2star.svg', 12:47:26 PM: to: '/images/2star.svg', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/images/bg.webp', 12:47:26 PM: to: '/images/bg.webp', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/images/large-star.svg', 12:47:26 PM: to: '/images/large-star.svg', 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: status: 200 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/*', 12:47:26 PM: to: '/.netlify/functions/___netlify-handler', 12:47:26 PM: status: 200, 12:47:26 PM: conditions: { Cookie: [Array] }, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/index.json', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/services/advanced-recursive-karmic-clearing.json', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/services/advanced-recursive-karmic-clearing', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/services/advanced-recursive-auric-clearing.json', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/services/advanced-recursive-auric-clearing', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: true 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/services/:slug.json', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/services/:slug', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/:slugParent.json', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/_next/data/CszgL5tz9RD43EYnNNyfK/:slugParent/*', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/:slugParent', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/:slugParent/*', 12:47:26 PM: to: '/.netlify/builders/___netlify-odb-handler', 12:47:26 PM: status: 200, 12:47:26 PM: force: false 12:47:26 PM: }, 12:47:26 PM: { 12:47:26 PM: from: '/*', 12:47:26 PM: to: '/.netlify/functions/___netlify-handler', 12:47:26 PM: status: 200 12:47:26 PM: } 12:47:26 PM: ]. 12:47:26 PM: 12:47:26 PM: (@netlify/plugin-nextjs onBuild completed in 290ms) 12:47:26 PM: 12:47:26 PM: Functions bundling 12:47:26 PM: ──────────────────────────────────────────────────────────────── 12:47:26 PM: 12:47:26 PM: Packaging Functions from .netlify/functions-internal directory: 12:47:26 PM: - ___netlify-handler/___netlify-handler.js 12:47:26 PM: - ___netlify-odb-handler/___netlify-odb-handler.js 12:47:26 PM: - _api_contact-handler/_api_contact-handler.js 12:47:26 PM: - _ipx/_ipx.js 12:47:26 PM: 12:48:50 PM: 12:48:50 PM: (Functions bundling completed in 1m 24.2s) 12:48:50 PM: 12:48:50 PM: Edge Functions bundling 12:48:50 PM: ──────────────────────────────────────────────────────────────── 12:48:50 PM: 12:48:50 PM: Packaging Edge Functions from .netlify/edge-functions directory: 12:48:50 PM: - ipx 12:48:50 PM: 12:48:50 PM: (Edge Functions bundling completed in 468ms) 12:48:50 PM: 12:48:50 PM: @netlify/plugin-nextjs (onPostBuild event) 12:48:50 PM: ──────────────────────────────────────────────────────────────── 12:48:50 PM: 12:48:51 PM: Next.js cache saved. 12:48:51 PM: 12:48:51 PM: (@netlify/plugin-nextjs onPostBuild completed in 285ms) 12:48:51 PM: 12:49:06 PM: (Netlify Build completed in 2m 23.4s) 12:49:07 PM: Section completed: building 12:49:11 PM: Finished processing build request in 3m1.693s ```Function logs
Function logs
``` # Paste logs here ```.next JSON files
generated .next JSON files
``` # Paste file contents here. Please check there isn't any private info in them # You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time. ```