Loading HTML Files in Next.js App Router

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

Next.js normally builds pages from React components, but sometimes you need to display a separately created .html file directly.

For example, you may need to show a document or render a results page supplied by an external system as it is.

This article walks through loading and displaying static HTML in the

Next.js App Router

Using the public folder 🔗

Files in Next.js's public folder are static assets that a browser can access directly.

For example, suppose the project has this structure.

my-app/
├─ public/
│  └─ static-page.html
├─ app/
│  └─ html-viewer/page.tsx

Opening http://localhost:3000/static-page.html loads the HTML file directly.

Next, let's display it inside a Next.js page using an iframe.

Rendering HTML through an iframe 🔗

Use the following code to show an HTML file in an iframe in App Router.

// 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>
  );
}

Visiting app/html-viewer now displays the contents of public/static-page.html through the iframe.

Converting PDFs to HTML 🔗

If you want to display a PDF on the web, another approach is to convert it to HTML and show that in an iframe.

A service such as CloudConvert PDF to HTML↗ can perform the conversion.

Place the converted HTML in public to display it easily on a web page through an 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>
  );
}

This is particularly useful when the PDF is large or the browser's built-in viewer is unavailable.

Users can also read the content immediately without a PDF viewer.

Troubleshooting 🔗

Loading HTML in an iframe is simple, but keep these points in mind.

Relative paths
: Relative paths to CSS, images, or JavaScript inside the HTML may display incorrectly. Prefer absolute paths such as /images/test.png when correcting them.
Content Security Policy (CSP)
: Organization or browser security policies may block iframe content. Server settings or security headers may need adjustment.
No SEO benefit
: Search engines may have difficulty recognizing HTML loaded through an iframe, so this does not help SEO.

Conclusion 🔗

The simplest approach to displaying external HTML in Next.js App Router is to

place it in public and render it through an iframe

Formats that are harder to display directly, such as PDFs, can also be converted to HTML and presented in the same way.

Use this approach for a clear purpose; where possible, migrating the HTML into React may be a better choice.

Further questions 🔗

Could an automated tool convert the HTML into React?
What about fetching HTML and rendering it with dangerouslySetInnerHTML instead of an iframe?
Could a dedicated library display the PDF directly?

References 🔗

Loading HTML Files in Next.js App Router | PromleeBlog