Cộng đồng Hỏi & Đáp của Inflearn

혹시 Next.js 16버전으로 개발 중이라면 http://localhost:8080 경로가 'private ip ...'로 처리되면서 이미지가 출력되지 않는 상황이 발생합니다.

Next.js16에서는 아래의 rewrites( )를 추가하시고

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */

  images: {
    remotePatterns: [
      {
        protocol: 'http', // 이미지 프로토콜 (http, https)
        hostname: 'localhost', // 이미지 호스트 이름 (IP 주소 또는 도메인)
        port: '8080', // 포트 번호 (필요한 경우)
        pathname: '/**', // 허용할 경로 패턴 (모든 경로 허용 시 '/**')
      },
    ],
  },
  
  async redirects() {
    return [
      {
        source: '/product', // 사용자가 접근하려는 경로
        destination: '/product/catalog/1', // 리다이렉트될 경로
        permanent: true, // 영구적인 리다이렉트 (308 Permanent Redirect)
      },

    ];
  },

  async rewrites() {
    return [
      {
        source: '/api/backend/:path*', // 사용자가 접근하려는 API 경로
        destination: 'http://localhost:8080/:path*', // 내부적으로 매핑될 백엔드 서버 경로
      },
    ];
  },

  experimental: {
    serverActions: {
      bodySizeLimit: '10mb'
    }
  },
};

export default nextConfig;

<Image>의 링크는

    <Image
                 src={`/api/backend/s_${fileName}`}
                 alt={`${product.pname} thumbnail ${fileName}`}

와 같이 경로를 수정해 주세요.

이번주에 Next.js 16버전으로 변경된 코드를 업로드할 예정입니다.

안녕하세요, 인프런 AI 인턴입니다. 오일중님.

이미지 파일의 변환 및 디스플레이와 관련된 문제는 주로 파일 이름 정리 과정이나 데이터베이스에서의 데이터 읽기, 변환 과정에서 오류가 발생할 가능성이 큽니다. 아래는 이 문제를 해결하기 위해 확인할 몇 가지 사항입니다:

1. 파일 이름 정리 및 데이터베이스 업데이트:

   • 이미지가 저장될 때 UUID 등으로 파일 이름이 변환되어 저장되는 방식인지 확인해 보세요. 만약 변환된 파일 이름이 데이터베이스에 저장되지 않았다면, 추후 호출 시 불일치가 발생하게 됩니다.
     
   • 파일이 저장되면서 데이터베이스에도 해당 파일의 정확한 이름이 반영되었는지 확인하세요.
     

2. 데이터베이스 값 불일치 확인:

   • 데이터베이스에서 fileName 컬럼에 29c13610-d02f-41b2-b12d-b1a65ebbec7a_img3.webp 이 제대로 업데이트 되었는지를 확인하세요. 이 값이 test1.webp로 남아 있다면, 저장 과정에서의 오류일 수 있습니다.
     

3. 애플리케이션 로직 검토:

   • 파일이 저장될 때 보내는 요청에 대한 로직 검토가 필요합니다. 저장 과정에서 파일 이름이 변환되지 않고 원래 이름으로 저장된다면, 저장 전의 파일 처리 과정에서 문제가 있을 수 있습니다.
     

아래의 링크에서 비슷한 문제를 겪으며 해결 방법을 공유한 게시물을 확인하시면 도움이 될 수 있습니다:

• 21강 이미지 출력이 안됩니다. 문제 해결을 위해 강의 내 설정 관련 유사한 이슈를 다룬 질문입니다. 이미지 이름 변환 및 데이터베이스 설정 문제를 해결하는 데 도움이 될 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.