Components

A collection of components for use in NextWP projects.

WordpressTemplate

A component used in a Next.js dynamic route to render Wordpress pages and posts.

src/app/[[...paths]]/page.tsx

import { WordpressTemplate, type RouteParams, type SearchParams } from "@nextwp/core";
import templates from "@/templates";

export default function PageRoute(props: {
  params: RouteParams;
  searchParams?: SearchParams;
}) {
  return (
    <WordpressTemplate
      params={props.params}
      searchParams={props.searchParams}
      templates={templates}
    />
  );
}

export { generateMetadata, generateStaticParams } from "@nextwp/core";

Props

Name
params
Type
object
Description
The params object passed from a Next.js optional catch all dynamic route.
Example: { paths: ['path', 'to', 'page'] }
Name
searchParams
Type
object
Description
The URL searchParams object passed from a Next.js dynamic route.
Example: { searchParams: { foo: 'bar' } }

Name

templates

Type

object

Description

Object of React components to be rendered for each Wordpress page template.
Example:

const templates = {
  page: {
    default: DefaultPageTemplate,
    home: HomePageTemplate,
    contact: ContactPageTemplate,
  },
  post: {
    default: DefaultPostTemplate,
    special: SpecialPostTemplate,
  },
  archive:{
    posts: PostArchiveTemplate,
    // custom post type archive
    movie: MovieArchiveTemplate,
  },
  // custom post type
  movie: {
    default: MovieTemplate,
  },
}

export { templates as default }

Name
supressWarnings
Type
boolean (optional)
Description
Supresses warnings in the console when a template component is missing.

FlexibleContent

A React component for rendering ACF flexible content blocks.

Usage

Export your block components from a single file, or construct an object of block components however you want. The component's export name must match the ACF flexible content layout name.

src/components/blocks/index.ts

export { Hero } from './hero'
export { Text } from './text'
export { FeaturedPosts } from './featured-posts'

Import your block components and pass them to FlexibleContent as the blocks prop.

import { FlexibleContent } from '@nextwp/core'
import * as blocks from '@/components/blocks'

export default function DefaultPageTemplate({ data }) {
  return <FlexibleContent rows={data?.acf?.modules} blocks={blocks} />
}

Properties

Name
blocks
Type
object
Description
Object of React components to be rendered for each ACF flexible content layout.
Name
rows
Type
array
Description
Array of row data from an acf flexible content field.
Name
data
Type
object (optional)
Description
Extra data passed to each component.
Name
supressWarnings
Type
boolean (optional)
Description
Supresses warnings in the console when a component is missing.

When using the FlexibleContent component, the acf_fc_layout property in the data will be converted from snake_case to PascalCase. This converted value will be used to find the corresponding component in the blocks object. The FlexibleContent component will then render the appropriate block component for each row of data.

Example ACF data from WP REST API

{
  "acf": {
    "my_flexible_content": [
      {
        "acf_fc_layout": "hero",
        "title": "Hello World"
      },
      {
        "acf_fc_layout": "text",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      },
      {
        "acf_fc_layout": "featured_posts",
        "links": [
          {
            "link": {
              "title": "Post 1",
              "url": "https://example.com/post-1"
            }
          },
          {
            "link": {
              "title": "Post 2",
              "url": "https://example.com/post-2"
            }
          }
        ]
      }
    ]
  }
}

With this example data, the FlexibleContent component would render the following components

Example rendered components

<Hero firstItem title="Hello World" />
<Text content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<FeaturedPosts
  links={[
    {
      link: {
        title: "Post 1",
        url: "https://example.com/post-1",
      },
    },
    {
      link: {
        title: "Post 2",
        url: "https://example.com/post-2",
      },
    },
  ]}
/>

Icon

Generates an app icon and favicon from the icon added in the WordPress Appearance menu.

In WordPress, you can set an icon for your site by going to Appearance > Customize > Site Identity. The icon uploaded in WordPress will be used as the favicon and app icon.

Usage

src/app/icon.tsx

export { Icon as default } from '@nextwp/core'

export const runtime = 'edge'
export const contentType = 'image/png'
export const sizes = {
  width: 32,
  height: 32,
}

AppleIcon

Generates an apple icon from the icon added in the WordPress Appearance menu. It is recommended to use both icon and apple-icon.

In WordPress, you can set an icon for your site by going to Appearance > Customize > Site Identity. The icon uploaded in WordPress will be used as the favicon and app icon.

Usage

src/app/apple-icon.tsx

export { AppleIcon as default } from '@nextwp/core'

export const runtime = 'edge'
export const contentType = 'image/png'
export const sizes = {
  width: 180,
  height: 180,
}