Generating My Resume PDF with React PDF and Next.js

While building this site, I wanted my resume in version control and always up to date, without keeping a separate document in sync by hand. So the resume is a route on the site. It renders a PDF with React PDF from the same data the site uses.

You'll need to know the Next.js App Router, basic React, and enough TypeScript to read interfaces.

The problem

Resumes are tedious to maintain. You end up with a version per role, formatting breaks when you convert between file types, and keeping them consistent across updates takes effort. I wanted to keep the content as structured data and get the same PDF out every time.

Why not Google Docs or Canva?

I didn't want to spend time designing a resume and fighting the formatting every time I changed a line. With the layout in code, I only had to get it right once.

Setup

The site already runs on Next.js, so the resume is just another route. The only new dependency is @react-pdf/renderer, which renders React components to a PDF. TypeScript keeps the data and the components in agreement.

File structure

The data

Experience, projects, education, achievements, and certifications are YAML files under content/. Content Collections validates them with Zod schemas and generates typed arrays, and src/lib/content.ts sorts and filters those arrays. The resume uses the same arrays as the rest of the site.

The things that only exist once, like contact details, the summary, and the skills list, live in a user object:

src/lib/constants.ts

export const user = {
  firstName: "Bismit",
  lastName: "Panda",
  location: "India",
  socials: {
    email: {
      label: "contact@bismitpanda.com",
      url: "mailto:contact@bismitpanda.com",
    },
    github: {
      label: "github.com/bismitpanda",
      url: "https://github.com/bismitpanda",
    },
    // ... phone, linkedin, twitter, website
  },
  about: "Co-Founder & CTO of AstraQ Cyber Defence, ...",
  technologies: {
    languages: "Rust, Go, TypeScript, Python, C++, Kotlin",
    // ... frontend, backend, databases, infrastructure, aiMl
  },
  projects: allResumeProjects,
  experience: allExperiencesByDate,
  education: allEducationsByDate,
  achievements: allAchievementsByDate,
  certifications: allCertificationsByDate,
};

Not every project belongs on a resume, so allResumeProjects keeps only the ones with a resumeSummary field:

src/lib/content.ts

export const allResumeProjects = allProjectsByDate.filter(
  (project) => project.resumeSummary,
);

Change a project's YAML file and both the projects page and the resume pick it up.

PDF generation

The PDF comes from a route handler at /resume. It renders the React PDF document to a buffer and returns it:

src/app/resume/route.tsx

import { renderToBuffer } from "@react-pdf/renderer";
import { NextResponse } from "next/server";
import { Resume } from "./_components/resume";

export const dynamic = "force-static";

export async function GET() {
  const buffer = await renderToBuffer(<Resume />);

  return new NextResponse(Buffer.from(buffer), {
    headers: {
      "Content-Type": "application/pdf",
      "Content-Disposition": "inline; filename=resume.pdf",
      "Content-Length": buffer.length.toString(),
    },
  });
}

force-static tells Next.js to run the handler once at build time and serve the result as a static file. The resume only changes when the content does, and the content only changes with a deploy, so rendering it per request would be wasted work.

Note

You can use Content-Disposition: "attachment" to force the browser to download the PDF instead of displaying it in the browser.

src/app/resume/route.tsx

  return new NextResponse(Buffer.from(buffer), {
    headers: {
      "Content-Type": "application/pdf",
      "Content-Disposition": "attachment; filename=resume.pdf",
      "Content-Length": buffer.length.toString(),
    },
  });

Note

If you'd rather name the file route.ts, you can't write JSX in it. Call the Resume component as a plain function instead:

src/app/resume/route.ts

export async function GET() {
  const buffer = await renderToBuffer(Resume());
  // ... return the response as above
}

Resume is the React PDF document itself. It lays out each section in order and passes it the relevant slice of user. Achievements and certifications share one "Honors" section to save space:

src/app/resume/_components/resume.tsx

export function Resume() {
  return (
    <Document
      author="Bismit Panda"
      subject="Resume"
      title="Bismit Panda's Resume"
    >
      <Page size="LETTER" style={styles.page}>
        <HeaderSection data={user} />
        <AboutMeSection content={user.about} />
        <ExperienceSection experience={user.experience} />
        <TechnologiesSection technologies={user.technologies} />
        <ProjectsSection projects={user.projects} />
        <EducationSection education={user.education} />
        <HonorsSection
          achievements={user.achievements}
          certifications={user.certifications}
        />
      </Page>
    </Document>
  );
}

Component structure

Each section is its own component. This is the experience section:

src/app/resume/_components/sections/experience.tsx

export function ExperienceSection({
  experience,
}: {
  experience: Experience[];
}) {
  return (
    <View style={styles.section} bookmark="Experience">
      <Text style={styles.sectionTitle}>Experience</Text>
      {experience.map((exp) => (
        <View key={`${exp.title}-${exp.company}`} style={styles.entryContainer}>
          <View style={styles.entryHeader}>
            <Text style={styles.entryTitle}>
              {exp.title}, {exp.company}
            </Text>
            <Text style={styles.entryDate}>
              {formatDate(exp.startDate, "MMM yyyy")} -{" "}
              {exp.endDate ? formatDate(exp.endDate, "MMM yyyy") : "Present"}
            </Text>
          </View>
          <Text style={styles.paragraph}>{exp.description}</Text>
          <View style={styles.highlightsList}>
            {exp.highlights.map((highlight) => (
              <View key={highlight} style={styles.highlight}>
                <Text style={styles.bullet}>•</Text>
                <Text style={styles.highlightText}>{highlight.trim()}.</Text>
              </View>
            ))}
          </View>
        </View>
      ))}
    </View>
  );
}

The bookmark prop adds an entry to the PDF's outline, so viewers that show a sidebar can jump straight to each section. React PDF supports it at runtime, but its type definitions don't include it on View, so the real file needs a @ts-expect-error above it.

Styling

React PDF doesn't use CSS files. You write style objects with StyleSheet.create() and pass them to components, much like React Native.

The resume is set in Cambria. Each weight and style is a separate font file, registered under one family name so that fontWeight: "bold" and fontStyle: "italic" pick the right file:

src/app/resume/_components/styles.ts

import { Font, StyleSheet } from "@react-pdf/renderer";

Font.register({
  family: "Cambria",
  src: "assets/fonts/Cambria.ttf",
  fontStyle: "normal",
  fontWeight: "normal",
});

Font.register({
  family: "Cambria",
  src: "assets/fonts/Cambria Bold 700.ttf",
  fontStyle: "normal",
  fontWeight: "bold",
});

// ... italic and bold italic are registered the same way

export const styles = StyleSheet.create({
  page: {
    fontFamily: "Cambria",
    fontSize: 10,
    lineHeight: 1.5,
    paddingTop: 25,
    paddingBottom: 25,
    paddingLeft: 30,
    paddingRight: 30,
    backgroundColor: "#ffffff",
  },
  // ... more styles
});

The src paths are relative to the directory the build runs from, which is the project root here.

Using it

Edit a YAML file or constants.ts, then open http://localhost:3000/resume. In development the route re-renders on each request, so you see changes straight away. The browser shows the PDF or downloads it, depending on its settings. In production the PDF is rebuilt on every deploy, so it always matches the site.

Generating My Resume PDF with React PDF and Next.js

The problem

Setup

File structure

The data

PDF generation

Component structure

Styling

Using it

What I learned

What's next

Code

Bismit Panda

Related Blogs

Generating My Resume PDF with React PDF and Next.js

content

education

experiences

projects

src

app

resume

_components

sections

lib

Bismit Panda

Related Blogs