인프런 커뮤니티 질문&답변
작성한 질문수
21강 이미지 출력이 안됩니다.
작성
·
30
·
수정됨
0
http://localhost:8080/s_uuid_filename.webp으로 브라우저에서는 이미지가 잘 출력되는데,
개발환경에서 next.js 서버 실행하고
http://localhost:3000/product/catalog/1
로 접속하면 이미지가 안 보입니다.
F12로 Network탭에서 이미지가 상태코드 400이 뜹니다.
next.config.mjs 파일에 remotePatterns 설정 되었어요.
next.jsx 터미널창에 로그는 아래와 같습니다.
GET /product/catalog/1 200 in 1251ms (compile: 1206ms, render: 45ms)
⨯ upstream image http://localhost:8080/s_uuid_filename9.webp resolved to private ip ["::1","127.0.0.1"]
⨯ upstream image http://localhost:8080/s_uuid_filename8.webp resolved to private ip ["::1","127.0.0.1"]
⨯ upstream image http://localhost:8080/s_uuid_filename7.webp resolved to private ip ["::1","127.0.0.1"]
⨯ upstream image http://localhost:8080/s_uuid_filename6.webp resolved to private ip ["::1","127.0.0.1"]
GPT에게 물어보니
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
unoptimized: true, // ← Next.js 이미지 최적화 끔
},
};
export default nextConfig;
최적화를 끄라고하는데,
이미지 최적화를 끄면 이미지는 나오지만
이미지 최적화 하면서 이미지가 나오게 할 수 있는 방법 있을까요?
현재 설치된 next.js 버전은 16.0.8입니다.
수업은 next.js 15버전인가요?
답변 1
0
네.. 강의 제작시에 최신 버전이 15였기 때문에 .. 16버전은 아닙니다(하지만 최근에 문제가 생겨서 16버전으로 업데이트하고 있는 중에 질문하셨네요).
혹시 말씀하시는 내용이
아래 코드에 있는 images 설정을 의미하시는 걸까요?
소스 코드내에도 적용되어 있겠지만 아래와 같은 설정이 필요합니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'http', // 이미지 프로토콜 (http, https)
hostname: 'localhost', // 이미지 호스트 이름 (IP 주소 또는 도메인)
port: '8080', // 포트 번호 (필요한 경우)
pathname: '/**', // 허용할 경로 패턴 (모든 경로 허용 시 '/**')
},
],
},
experimental: { // 'experimental' 아래에 serverActions를 정의해야 합니다.
serverActions: {
bodySizeLimit: '40mb', // 원하는 크기로 조절하세요 (예: '50mb', '100mb')
},
},
async redirects() {
return [
{
source: '/product', // 사용자가 접근하려는 경로
destination: '/product/catalog/1', // 리다이렉트될 경로
permanent: true, // 영구적인 리다이렉트 (308 Permanent Redirect)
},
];
},
};
export default nextConfig;
rewrites 를 적용하니 16버전도 동작하는거 같습니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'http',
hostname: '127.0.0.1',
port: '8080',
pathname: '/**',
},
]
},
experimental: { // 'experimental' 아래에 serverActions를 정의해야 합니다.
serverActions: {
bodySizeLimit: '40mb', // 원하는 크기로 조절하세요 (예: '50mb', '100mb')
},
},
async redirects() {
return [
{
source: '/product', // 사용자가 접근하려는 경로
destination: '/product/catalog/1', // 리다이렉트될 경로
permanent: true, // 영구적인 리다이렉트 (308 Permanent Redirect)
},
];
},
// 프록시 설정: 클라이언트에서 '/api/backend'로 요청하면
// 내부적으로 'http://localhost:8080'으로 전달합니다.
async rewrites() {
return [
{
source: '/api/backend/:path*', // Next.js 앱에서 사용할 경로
destination: 'http://localhost:8080/:path*', // 실제 백엔드 주소 (Spring Boot)
},
];
},
};
export default nextConfig;이미지 경로는 'http://localhost:8080' 대신에 '/api/backend/' 경로로 지정하시면 가능합니다.
<Image
src={`/api/backend/s_${product.fileName}`}
네, 설정은 했고요.
이미지 최적화 설정하는 부분에서 localhost로 이미지 접속이 안되어서
이미지 최적화 설정부분을 꺼야 이미지가 나와서요...
images: {
unoptimized: true, // ← Next.js 이미지 최적화 끔
},
next.js 16버전에서는 hostname이 localhost, 127.0.01로 해도 private ip로 막히는 것 같아요...
윈도우즈 hosts 파일에서 Netwrok ip로 도메인을 설정후에
그 도메인을 hostname에 설정해야 되는 것 같아요...