@nextwp/core

NextWP

Welcome to the new era of Headless WordPress development.

Quickstart | Explore packages | Documentation

What is NextWP?

NextWP is a library built on the WP REST API and Next.js App Router that streamlines the process of building super fast Headless WordPress sites with Next.js. It provides a set of tools and utilities to help you build interactive, dynamic, and performant sites with WordPress and Next.js.

Why does NextWP use the WP REST API?

Features

• Server Side Generation (SSG): Effortlessly pre-render content from WordPress in your Next.js app.
• On-Demand Incremental Revalidation: Revalidates pages on demand when content updates in WordPress.
• CMS Previews with Next.js Draft Mode: Instantly preview your content changes while you work for a seamless editing experience.
• Sitemap Generation: Automatically generates a sitemap.xml for your pages, posts, and optionally custom post types.
• ACF Support: Page data automatically includes the acf field from the REST API. Just enable "Show in REST API" for your field group.
• Flexible Content Component: Easily render ACF flexible content fields in your Next.js app.

WordPress Theme

The easiest way to get started is to install NextWP Headless Theme in your WordPress site. This will install the required plugins and offer optional recommended plugins to improve the headless WP experience.

Prerequisites

Ensure you have the following WordPress plugins installed:

• Advanced Custom Fields: Enables custom fields in WordPress.
• Yoast SEO: Provides SEO features for WordPress sites.
• NextWP - Headless Toolkit: Essential for CMS previews in NextJS.

Quick Start

One click deploy a new project to Vercel:

Or, you can get up and running by using the cli tool create-nextwp-app:

npx create-nextwp-app

If you want to add to an existing project, you can install the @nextwp/core package:

Install @nextwp/core in your Next.js project:

npm install @nextwp/core

Here is a basic example of how to use @nextwp/core in your existing Next.js project:

// src/app/[[...paths]]/page.tsx
import { WordpressTemplate } from "@nextwp/core";
import templates from "@/templates";

export default function PageTemplate(props) {
  return (
    <WordpressTemplate
      params={props.params}
      searchParams={props.searchParams}
      templates={templates}
    />
  );
}

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

Read the NextWP docs for more information on how to use @nextwp/core.

Configuration

Environment Variables

The following environment variables are required for configuring @nextwp/core:

• NEXT_PUBLIC_WP_URL: The URL of your WordPress site.
• NEXT_SITE_URL: The URL of your Next.js site.
• REVALIDATE_SECRET_KEY: A secret key used for revalidation.
• WP_APPLICATION_PASSWORD: The application password for authenticating with WordPress.
• NEXT_PREVIEW_SECRET: The secret key for preview mode.

Make sure to set these environment variables in your project's configuration.

Read more about environment variables.