인프런 커뮤니티 질문&답변
작성한 질문수
next.js 13버전에서 express.static('public')이 먹지 않습니다.
작성
·
501
0
안녕하세요.
강의를 수강하면서 next 13으로 만들고 있습니다...
노드에서 이미지 정적 폴더를 생성하고, 이미지가 서버에 저장되게끔 하는거는 구현했는데,
아무리 해도 next에서 서버에 있는 이미지를 불러오지를 못합니다.
아래는 제가 시도해본 방법입니다.
app.use('/', express.static(__dirname + '/public'));
app.use(express.static('public'));express에서 클라이언트 단으로 던져주는 저 app.use 자체가 먹지 않고 있고 아무 에러도 나오지 않아서 너무 답답합니다 ㅠㅠ 어떻게 해야 될까요...?.......
답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
next.js 13버전에서 express.static(‘public’)이 먹지 않는 상황에 대해서 답변해드릴게요.
next.js에서는 express.static() 대신에 public 폴더를 pages 폴더와 같은 위치에 두는 것이 권장되고 있습니다. 그래서 public 폴더를 사용하려면 next.config.js 파일에서 다음 코드를 추가해주셔야 해요.
module.exports = {
// ...
async rewrites() {
return [
{
source: '/public/:path*',
destination: '/:path*',
},
]
},
// ...
}
이렇게 설정 후, 이미지를 사용하는 페이지에서는 public 폴더에 있는 이미지를 다음과 같이 불러와야 해요.
<img src="/demo.jpg" alt="demo" />
이미지가 public 폴더에 있고 제대로 불러오지 못하는 경우, 경로가 제대로 설정되어 있는지 한 번 더 확인해보세요.
도움이 되었길 바랍니다.