[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트의 경로는 다르다!

1. 분명히 이 경로가 맞는데?!

mind-ar의 Target인 target.mind 파일을 public/uploads에 두었다. 그리고 아래의 코드와 같이 작성했다.

import path from "path";

const mindarThree = new MindARThree({
  container: containerRef.current,
  imageTargetSrc: path.join("public/uploads", "targets.mind"), // 이 부분을 주목하라!
});

console.log를 찍어 보면 분명히 "http://localhost:3000/public/uploads/targets.mind"라고 정확한 경로가 이쁘게 찍히는데 왜 이 경로가 아니라는 걸까???

 

2. 클라이언트 컴포넌트에서 정적 자산의 경로 지정 방법

"public/uploads/targets.mind" 파일을 로드하기 위해서는 정적 자산(static assets)으로 설정된 경로에서 해당 파일을 찾아야 한다. Next.js에서 public 디렉터리 안의 파일은 정적 자산으로 취급되며 클라이언트 측에서 이 파일들에 직접 액세스할 수 있다.

imageTargetSrc: "/uploads/targets.mind"

 

Next.js에서 정적 자산은 서버에서 클라이언트로 제공될 때 파일 경로가 변경된다. path.join()은 파일 경로를 서버 측에서 사용하는 데에는 유용하지만, 클라이언트 측에서는 일반적으로 브라우저의 URL 경로와 일치하지 않는다. 클라이언트 측에서 파일을 로드할 때, 정적 자산은 해당 파일이 서버에서 제공되는 URL 경로를 따른다. Next.js에서는 정적 자산의 URL 경로를 지정할 필요가 없으며, 이 경로는 정적 자산이 서버에 의해 자동으로 처리된다. 따라서 path.join()과 같은 경로 조작 메서드를 사용하여 파일 경로를 생성하거나 수정하는 것은 클라이언트 측에서는 일반적으로 불필요하다. 단순히 파일의 상대 경로를 지정하고 해당 파일을 정적 자산으로 제공하도록 Next.js에게 처리를 맡기면 된다.