What happens when Next.js meets WordPress?

As a small content management system, WordPress is popular with many webmasters, especially for personal blogs. Its rich plug-ins and themes provide more customization and freedom.

Since the rise of the front-end and back-end separation development model, WordPress has been used as a back-end service for data storage to provide interfaces for third-party front-end pages. Thanks to its own REST API function, it can be turned on in the background settings. There are also developers who have expanded more functions through plug-ins and developed blog mini-programs, mall mini-programs, community mini-programs, etc.

Peanut Shop [1] – a WeChat e-commerce mini-program SAAS platform developed with WordPress;

WooCommerce WeChat Mini Program [2] – a mall-type mini-program developed in conjunction with the WordPress mall plug-in WooCommerce

Weimu Mini Program [3] – Quickly convert WordPress websites into mini programs. The open source provides WordPress backend plug-in and mini program code.

Next.js + WordPress

As an emerging technology with React as the underlying technology, Next.js is a framework for building modern, high-performance web applications and has server-side rendering capabilities. So the combination of Next.js and WordPress became natural.

This is the open source project nextjs-wordpress[4] (https://github.com/gregrickaby/nextjs-wordpress). This warehouse uses GraphQL technology to query the data provided by WordPress and uses Next .js and Tailwind CSS to build and operate front-end pages and styles.

The following are site examples provided:
It’s headless WordPress! – https://nextjswp.com[5]

The style is extremely simple, but the advantage lies in its superior rendering performance, and the test results are given:

5797d1f792d4316f974748a048a3e0a1.png

Preparation

Suppose you already have a WordPress site. For example, my front-end development notes site [6] (https://i-fanr.com) is built using the WordPress program.

If you don’t have one yet, you can also use the integrated installation environment tool Wampserver64[7] to quickly build a local test site. It is assumed that the computer you are using is a Windows system. After installing the software, it is equivalent to having a local development environment set of Apache + PHP + MySQL.

f2e3fbaa33a7f200100e015a35823346.png

Download address[8]

Place the downloaded WordPress source code [9] in the installation directory of the Wampserver software at the location wamp64\www\wordpress. After starting the service, access port 80 by default. When browsing Open the access address of the server: http://localhost/wordpress/

Next, you’ll need to prepare your WordPress site with the following plugins:

  • Advanced Custom Fields[10] (free version is fine)

  • Next.js WordPress Plugin[11]

  • Next.js WordPress Theme[12]

  • WPGraphQL Yoast SEO[13]

  • WPGraphQL for Advanced Custom Fields[14]

  • WPGraphQL[15]

  • Yoast SEO[16]

becae8f1bac8bdfb0c2c8f7331551402.png

Start local Next.js App

Clone the warehouse code to local

git clone [email protected]:gregrickaby/nextjs-wordpress.git

Installation package

npm i

Configure environment variables

cp .env.example .env.local

Modify variables in the file

# WordPress GraphQL API URL. No trailing slash.
NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL="http://localhost/wordpress/graphql"

# Preview Secret. Must match the constant in wp-config.php.
NEXTJS_PREVIEW_SECRET="preview"

# Revalidation Secret. Must match the constant in wp-config.php.
NEXTJS_REVALIDATION_SECRET="revalidate"

Modify next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['localhost'],
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'http://localhost/wordpress' // <-- Change to your WordPress site
      },
      {
        protocol: 'https',
        hostname: '**.gravatar.com'
      }
    ]
  }
}

module.exports = nextConfig

Next, ensure that WordPress has been installed and related plug-ins and themes are enabled, then modify the configuration file wp-config.php and add the following global constant definitions

// The URL of your Next.js frontend. Include the trailing slash.
define( 'NEXTJS_FRONTEND_URL', 'http://localhost/wordpress' );

// Any random string. This must match the .env variable in the Next.js frontend.
define( 'NEXTJS_PREVIEW_SECRET', 'preview' );

// Any random string. This must match the .env variable in the Next.js frontend.
define( 'NEXTJS_REVALIDATION_SECRET', 'revalidate' );

Start service locally

npm run dev

Open http://localhost:3000[17] for preview

0508719c0b4d1cae646b9930dbe74495.png

Reference materials

[1]

Peanut Shop: https://www.97866.com

[2]

WooCommerce WeChat Mini Program: https://www.qwqoffice.com/article-30.html

[3]

Weimu Mini Program: https://www.minapper.com

[4]

nextjs-wordpress: https://github.com/gregrickaby/nextjs-wordpress

[5]

https://nextjswp.com: https://nextjswp.com/

[6]

Front-end development note site: https://i-fanr.com

[7]

Wampserver64: https://www.wampserver.com

[8]

Download address: https://www.wampserver.com/en/download-wampserver-64bits

[9]

WordPress source code: https://cn.wordpress.org/download/source/

[10]

Advanced Custom Fields: https://wordpress.org/plugins/advanced-custom-fields/

[11]

Next.js WordPress Plugin: https://github.com/gregrickaby/nextjs-wordpress-plugin

[12]

Next.js WordPress Theme: https://github.com/gregrickaby/nextjs-wordpress-theme

[13]

WPGraphQL Yoast SEO: https://wordpress.org/plugins/add-wpgraphql-seo/

[14]

WPGraphQL for Advanced Custom Fields: https://www.wpgraphql.com/acf/

[15]

WPGraphQL: https://www.wpgraphql.com/

[16]

Yoast SEO: https://wordpress.org/plugins/wordpress-seo/

[17]

http://localhost:3000: http://localhost:3000/