Next.js App Router에서 HTML 파일 로드하기Loading HTML Files in Next.js App Router
📅
🚀
들어가기 전에🔗
Next.js는 기본적으로 React 컴포넌트 기반으로 페이지를 구성하지만, 때로는 외부에서 만든
.html 파일을 직접 페이지에 표시해야 할 일이 있습니다. 예를 들어, 문서 파일을 보여주거나 외부에서 전달된 결과 페이지를 그대로 렌더링해야 하는 경우가 있을 수 있습니다.
이번 글에서는 Next.js App Router 환경
에서 정적인 HTML 파일을 로드하여 사용자에게 보여주는 방법을 하나하나 살펴보겠습니다.🚀
public 폴더 활용하기🔗
Next.js에서는
public 폴더에 있는 파일들은 정적인 자산(static asset)으로 처리되며, 브라우저에서 직접 접근할 수 있습니다.
예를 들어 프로젝트 구조가 아래와 같다고 해보겠습니다:my-app/
├─ public/
│ └─ static-page.html
├─ app/
│ └─ html-viewer/page.tsx
이 경우
http://localhost:3000/static-page.html 주소로 접속하면 HTML 파일이 직접 로드됩니다.
그럼 이제 이 HTML 파일을 Next.js 페이지 내부에서 iframe을 통해 보여주는 방법을 알아보겠습니다.🚀
HTML 파일을 iframe으로 렌더링하기🔗
App Router 환경에서 특정 HTML 파일을 iframe으로 보여주려면 다음과 같은 코드를 사용할 수 있습니다.
// app/html-viewer/page.tsx
export default function HtmlViewerPage() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<iframe
src="/static-page.html"
width="100%"
height="100%"
style={{ border: 'none' }}
title="Static HTML Page"
/>
</div>
);
}이렇게 하면
app/html-viewer 경로로 접근했을 때, public/static-page.html 파일의 내용을 iframe을 통해 브라우저에 렌더링하게 됩니다.🚀
PDF 파일을 HTML로 변환해 활용하기🔗
만약 PDF 파일을 웹에 띄우고 싶은 경우, 이를 HTML로 변환한 뒤 iframe으로 표시하는 방법도 있습니다.
예를 들어 CloudConvert PDF to HTML↗ 같은 웹사이트를 이용하면, PDF 파일을 쉽게 HTML 파일로 변환할 수 있습니다. 변환된 HTML 파일을
public 폴더에 업로드하면 iframe을 통해 쉽게 웹 페이지에서 보여줄 수 있습니다.my-app/
├─ public/
│ └─ my-pdf.html
├─ app/
│ └─ pdf-viewer/page.tsx
// app/pdf-viewer/page.tsx
export default function PdfViewerPage() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<iframe
src="/my-pdf.html"
width="100%"
height="100%"
style={{ border: 'none' }}
title="Converted PDF"
/>
</div>
);
}이 방식은 PDF 파일이 무겁거나 브라우저 내장 뷰어를 사용할 수 없는 상황에서 특히 유용합니다. 또한 사용자가 PDF 뷰어 없이도 내용을 바로 볼 수 있다는 장점이 있습니다.
🚀
문제 발생 및 해결🔗
HTML 파일을 iframe으로 불러오는 방식은 간단하지만, 몇 가지 주의할 점이 있습니다.
- 상대 경로 주의: HTML 파일 안에서 사용하는 CSS, 이미지, JS 경로가 상대 경로로 되어 있다면 잘못 표시될 수 있습니다. 이 경우에는 절대 경로(
/images/test.png형태)로 수정해주는 것이 좋습니다. - 보안 정책(CSP): 회사 내 보안 설정이나 브라우저 보안 정책에 따라 iframe 내 콘텐츠가 차단될 수도 있습니다. 이 경우에는 서버 설정이나 보안 헤더를 조정해야 합니다.
- SEO 반영 안됨: iframe으로 로드한 HTML은 검색 엔진이 인식하기 어렵기 때문에 SEO에는 도움이 되지 않습니다.
🚀
결론🔗
Next.js App Router 환경에서 외부 HTML 파일을 보여주기 위해서는 하는 방식이 가장 간단하고 직관적입니다.
특히 PDF 파일처럼 직접 보여주기 어려운 포맷도 HTML로 변환한 후 같은 방식으로 쉽게 사용자에게 제공할 수 있습니다.
단, 이 방법은 사용 목적이 명확할 때에만 사용하는 것이 좋으며, 가능하다면 HTML 내용을 React로 마이그레이션하는 것이 더 좋은 선택일 수 있습니다.
public 폴더에 HTML 파일을 넣고 iframe을 사용해 렌더링✅
더 생각해 보기🔗
- HTML 파일을 React로 변환하는 자동화 도구를 사용할 수 있을까요?
- iframe 없이 HTML을 fetch해서 dangerouslySetInnerHTML로 렌더링하는 방법은 어떨까요?
- PDF를 직접 보여줄 수 있는 뷰어 라이브러리도 고려해볼 수 있을까요?
✅