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:
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
.
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]
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
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/