Content Component

The Content component renders WordPress HTML content in React, automatically handling Gutenberg blocks, HTML entities, table structures, and WordPress layout classes.

import { Content } from '@axistaylor/nextpress';

export default function Page({ content, contentCssClasses }: {
  content: string;
  contentCssClasses: string[];
}) {
  return <Content content={content} contentCssClasses={contentCssClasses} />;
}

The Content component:

1. Wraps output in [data-rendered] — Parsed HTML is rendered inside <div data-rendered>. This attribute is the scope root that GlobalStyles and Stylesheets use to isolate WordPress CSS from your application styling.
2. Applies layout classes — When contentCssClasses is provided, an inner wrapper <div> receives the WP layout classes (is-layout-constrained, has-global-padding, etc.) so WordPress layout spacing and content-width constraints work correctly.
3. Parses HTML — Uses html-react-parser to convert HTML string to React elements.
4. Fixes Tables — Wraps table rows in <tbody> if missing (required by React).
5. Rewrites URLs — Internal WordPress links are rewritten to Next.js routes when formatPermalinks is enabled (the default).

The contentCssClasses field is registered on the WPGraphQL ContentNode interface by the NextPress WordPress plugin. It returns the CSS classes WordPress would apply to the post-content wrapper based on the template's layout attribute.

query GetPage($uri: String!) {
  nodeByUri(uri: $uri) {
    ... on Page {
      content
      contentCssClasses
    }
    ... on Post {
      content
      contentCssClasses
    }
  }
}

// app/(wordpress)/[[...uri]]/page.tsx
import { Content } from '@axistaylor/nextpress';
import { nextImageParser } from '@axistaylor/nextpress/client';
import Link from 'next/link';

async function fetchContent(uri: string) {
  const res = await fetch(process.env.GRAPHQL_ENDPOINT!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `query ($uri: String!) {
        nodeByUri(uri: $uri) {
          ... on Page { content contentCssClasses }
          ... on Post { content contentCssClasses }
        }
      }`,
      variables: { uri },
    }),
  });
  const { data } = await res.json();
  return data?.nodeByUri;
}

export default async function Page({ params }: { params: Promise<{ uri?: string[] }> }) {
  const { uri: segments } = await params;
  const uri = '/' + (segments?.join('/') || '');
  const node = await fetchContent(uri);

  if (!node?.content) return null;

  return (
    <Content
      content={node.content}
      contentCssClasses={node.contentCssClasses}
      linksAs={Link}
      parsers={[nextImageParser]}
    />
  );
}

WordPress block templates define a layout on the core/post-content block (e.g. {"layout":{"type":"constrained"}}). This generates CSS classes that control content width, padding, and spacing. Without these classes, your headless content will lack the layout constraints the theme intends.

See Content CSS for a full guide on getting WordPress content to render correctly.

See Parsers for details on parsers, nextImageParser, and createUrlRewritingParser.

When using multiple WordPress backends, specify the instance:

<Content content={content} contentCssClasses={cssClasses} instance="blog" />

See Multi-WordPress Setup for configuration details.

• Content CSS — Full guide to rendering WordPress content CSS correctly
• Parsers — Built-in and custom content parsers
• GlobalStyles — Theme.json global styles
• Stylesheets — WordPress enqueued stylesheets
• WPHead — Head assets (combines GlobalStyles + Stylesheets + scripts)