質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Q&A

0回答

1269閲覧

next/imageのImageタグの画像が500を返す

ap2c9w

総合スコア40

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

0グッド

0クリップ

投稿2023/03/08 14:13

編集2023/03/08 23:54

実現したいこと

TypeScript

1import Image from 'next/image' 2 3<Image 4 src={imageURL} 5 alt={imageName} 6 width={110} 7 height={150} 8></Image>

上記のImageタグが60個あるComponentを表示しようとすると画像によって500が返ってきます。
イメージ説明
Imageのうち30個ほどは正常に表示される(200が返ってくる)のですが、30個ほどは500が返ってきてしまいます。
例えば
https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample001.jpg&w=256&q=75
は500になりますが、
https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample002.jpg&w=256&q=75
は200になります。
imageURLのドメインはすべて同じで外部のサイトになります。

直接
https://example.com/_next/image?url=https%3A%2F%2Fexample.net%2Fsample001.jpg&w=256&q=75
にアクセスすると200が返ってくる場合もありますし、しばらくして500が返ってくることもあります。

本事象は借用しているベアメタルの専用サーバー(AlmaLinux)で、yarn devで開発用で立ち上げた際、事象は発生せず、yarn startで立ち上げた場合、事象が発生いたします。
自分のPC(Windows11)でyarn startで立ち上げた場合、事象は発生いたしません。

とりあえずの対処として、<Image><img>にすれば問題なく表示されることが分かったのですが、Next.jsの機能を使いたいので、解決する方法があればご教示頂きたいです。
以下の補足情報の通りnext.config.jsのimagesのremotePatternsは適切に設定しております。

500が返ってきた際のサーバーの応答は以下の通りです。

全般 リクエスト URL: https://discounted-video.dyndns.org/_next/image?url=https%3A%2F%2Fpics.dmm.co.jp%2Fdigital%2Fvideo%2Fipx00312%2Fipx00312ps.jpg&w=128&q=75 リクエスト メソッド: GET ステータス コード: 500 (service worker から) 参照ポリシー: strict-origin-when-cross-origin

html

1レスポンス 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <style data-next-hide-fouc="true">body{display:none}</style> 6 <noscript data-next-hide-fouc="true"> 7 <style>body{display:block}</style> 8 </noscript> 9 <meta charSet="utf-8"/> 10 <meta name="viewport" content="width=device-width"/> 11 <meta name="next-head-count" content="2"/> 12 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"/> 13 <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"/> 14 <meta name="msapplication-wide310x150logo" content="/site-tile-310x150.png"/> 15 <meta name="msapplication-square310x310logo" content="/site-tile-310x310.png"/> 16 <meta name="msapplication-TileColor" content="#000"/> 17 <meta name="apple-mobile-web-app-capable" content="yes"/> 18 <meta name="apple-mobile-web-app-status-bar-style" content="#000"/> 19 <meta name="apple-mobile-web-app-title" content="myapp"/> 20 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/> 21 <meta name="application-name" content="myapp"/> 22 <meta name="theme-color" content="#000"/> 23 <meta name="description" content="this is myapp"/> 24 <link rel="icon" sizes="192x192" href="/icon-192x192.png"/> 25 <link rel="icon" href="/favicon.ico"/> 26 <link rel="manifest" href="/manifest.json"/> 27 <noscript data-n-css=""></noscript> 28 <script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1678315631101"></script> 29 <script src="/_next/static/chunks/webpack.js?ts=1678315631101" defer=""></script> 30 <script src="/_next/static/chunks/main.js?ts=1678315631101" defer=""></script> 31 <script src="/_next/static/chunks/pages/_app.js?ts=1678315631101" defer=""></script> 32 <script src="/_next/static/chunks/pages/_error.js?ts=1678315631101" defer=""></script> 33 <script src="/_next/static/development/_buildManifest.js?ts=1678315631101" defer=""></script> 34 <script src="/_next/static/development/_ssgManifest.js?ts=1678315631101" defer=""></script> 35 <noscript id="__next_css__DO_NOT_USE__"></noscript> 36 <style data-emotion="mantine "></style> 37 </head> 38 <body> 39 <div id="__next"></div> 40 <script src="/_next/static/chunks/react-refresh.js?ts=1678315631101"></script> 41 <script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500}},"page":"/_error","query":{"__NEXT_PAGE":"/_next/image"},"buildId":"development","isFallback":false,"err":{"name":"TypeError","source":"server","message":"fetch failed","stack":"TypeError: fetch failedn at Object.fetch (node:internal/deps/undici/undici:11118:11)n at processTicksAndRejections (node:internal/process/task_queues:95:5)n at runNextTicks (node:internal/process/task_queues:64:3)n at process.processImmediate (node:internal/timers:442:9)n at async imageOptimizer (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/image-optimizer.js:473:29)n at async cacheEntry.imageResponseCache.get.incrementalCache (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/next-server.js:238:72)n at async /home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/response-cache/index.js:83:36"},"gip":true,"scriptLoader":[]}</script> 42 </body> 43</html>

Nexs.jsのログは以下の通りです。

TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11118:11) at processTicksAndRejections (node:internal/process/task_queues:95:5) at runNextTicks (node:internal/process/task_queues:64:3) at process.processImmediate (node:internal/timers:442:9) at async imageOptimizer (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/image-optimizer.js:473:29) at async cacheEntry.imageResponseCache.get.incrementalCache (/home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/next-server.js:238:72) at async /home/ap2/fanza/fanzaVideo/front/node_modules/next/dist/server/response-cache/index.js:83:36 { cause: ConnectTimeoutError: Connect Timeout Error at onConnectTimeout (node:internal/deps/undici/undici:6625:28) at node:internal/deps/undici/undici:6583:50 at Immediate._onImmediate (node:internal/deps/undici/undici:6614:13) at process.processImmediate (node:internal/timers:471:21) { code: 'UND_ERR_CONNECT_TIMEOUT' } }

環境

クラアント --- Apache(プロキシ) --- 専用サーバー(Next.jsを配置、dockerは使用しておらず、直接yarn startしています。Vercelではないです。)

Apacheを通さず、直接専用サーバーにデプロイしたNext.jsにアクセスしても現象が起こることから、Apache被疑ではないです。

yarn devで開発用で立ち上げた際、事象は発生せず、yarn startで立ち上げた場合、事象が発生いたします。

補足情報(FW/ツールのバージョンなど)

next.config.js

1/** @type {import('next').NextConfig} */ 2const withPWA = require('next-pwa')({ 3 dest: 'public', 4}) 5 6const nextConfig = withPWA({ 7 reactStrictMode: true, 8 swcMinify: true, 9 images: { 10 remotePatterns: [ 11 { 12 protocol: 'https', 13 hostname: 'example.net', 14 }, 15 ], 16 }, 17}) 18 19module.exports = nextConfig

package.json

1{ 2 "name": "front", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "dev": "next dev", 7 "build": "next build", 8 "start": "next start", 9 "lint": "next lint" 10 }, 11 "dependencies": { 12 "@emotion/react": "11.10.0", 13 "@emotion/server": "11.10.0", 14 "@tanstack/react-query": "4.0.10", 15 "@tanstack/react-query-devtools": "4.0.10", 16 "axios": "0.27.2", 17 "date-fns": "^2.29.3", 18 "gray-matter": "^4.0.3", 19 "next": "^13.1.7-canary.10", 20 "next-pwa": "^5.6.0", 21 "react": "18.2.0", 22 "react-cookie": "^4.1.1", 23 "react-dom": "18.2.0", 24 "react-share": "^4.4.1", 25 "sharp": "^0.31.3", 26 "styled-components": "^5.3.6", 27 "universal-cookie": "^4.0.4", 28 }, 29 "devDependencies": { 30 "typescript": "4.9.4", 31 "typesync": "^0.9.2" 32(中略) 33 }, 34 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問