Using PagedJS with Next.js

Setting Up a Next.js Project

Create a new Next.js project:

npx create-next-app@latest my-next-app
cd my-next-app

Create a new Page

Create a page for your PDF document at app/magazine/page.tsx:

'use client';
import Script from 'next/script';

export default function Magazine() {
  return (
    <>
      <Script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js" />
      <div className="content">
        <h1>Doppio Magazine</h1>
        {[1, 2, 3, 4, 5].map((i) => (
          <section key={i} className="page">
            <h2>Chapter {i}</h2>
            <p>Content of chapter {i}.</p>
          </section>
        ))}
      </div>
    </>
  );
}

Styling

Add styles for the paginated output:

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 4rem;
}
.page { break-after: page; }
h1 { color: #5935dd; text-align: center; }
h2 { color: #3c3c3c; text-align: center; }
p { color: #a1a1a1; text-align: center; }

Generate PDFs with Doppio

Deploy your Next.js app and use Doppio to convert the page to PDF. Doppio will handle the rendering with full JavaScript support.

What's next?

Check out the Paged.js documentation for more advanced features!