KeepNext

Keeps the wrapped element together with its immediate next sibling. This prevents a page break between the two elements.

React

import { KeepNext } from "@press-js/react";

<KeepNext>
  <h2>Section Title</h2>
</KeepNext>
<p>
  This paragraph stays on the same page as the heading above,
  even near a page boundary.
</p>

Vue

<script setup lang="ts">
  import { KeepNext } from "@press-js/vue";
</script>

<template>
  <KeepNext>
    <h2>Section Title</h2>
  </KeepNext>
  <p>
    This paragraph stays on the same page as the heading above, even near a page
    boundary.
  </p>
</template>

Props

Both className and style are supported.

Native HTML API

The component renders a <div data-press-keep-next>. This attribute is Press.js’s native way to prevent page breaks between two elements:

<div data-press-keep-next>
  <h2>Section Title</h2>
</div>
<p>This paragraph stays on the same page as the heading above.</p>

Any element with data-press-keep-next prevents a page break between itself and its next sibling.

Automatic behavior

Heading tags (<h1> through <h6>) automatically get keep-next behavior from the pagination engine. You don’t need to wrap them in <KeepNext> — adding it is redundant for headings but harmless.

When to use

• A heading that should not be the last line on a page
• A label followed by a short value
• An image thumbnail with its description

Difference from KeepTogether

KeepTogether	KeepNext
Prevents breaks inside the wrapped content	Prevents breaks between the element and its next sibling
Affects all nested children	Affects only the boundary with the next element
Use for multi-element units (chart + caption)	Use for two related elements (heading + paragraph)