From the root of this project, run the following command to start the Next.js development server on http://localhost:3000
npm run devNote: Make sure Docker is running first, otherwise Next.js wont be able to query any data.
Regularly linting the codebase is highly encouraged (and is enforced via pre-commit hook) to ensure code quality and consistency.
npm run lintIt's often helpful to run a production build locally to verify everything works before deploying. To run a production build, run the following command:
npm run build && npm run startNext.js supports image optimization out of the box. To use it, you can import the Image component from next/image and pass it the URL of the image you want to optimize, including images from WordPress.
In order to use Remote Images, you'll need to update the list of hostnames in next.config.js.
For example, if you're loading remote images from unsplash.com:
// next.config.js
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.unsplash.com'
}
]
}Next.js supports on-demand revalidation. This means that if a post or page is updated in WordPress, then WordPress will ping the frontend and tell Next.js to re-generate that post or page in the background. The next visitor to that page will see the updated content.
If your site has a lot of traffic, this option provides the best user experience and prevents your WordPress server from becoming overwhelmed, since content will remain static until it has been updated.
To view the code for this feature, check out the frontend and backend repositories.
If your WordPress install has hundreds or even thousands of pages and posts, it will take a long time to generate a static site at build time. Additionally, WP GraphQL caps the number of requests to 100, so querying more than that will likely overwhelm your server[1].
Instead, you can generate paths on-demand. This means pages and posts will be server-side rendered first, then cached, and then served statically for the next visitor. This is a good compromise for sites with a lot of content.
To disable static site generation, set the DISABLE_STATIC_SITE_GENERATION environment variable in .env to true:
// .env
DISABLE_STATIC_SITE_GENERATION="true"
Next.js supports ISR for pages that use getStaticProps. This means Next.js will re-generate a page or post in the background and serve the updated page to the next user.
If you open pages/[...slug].js and look at the getStaticProps function, you'll see that it has a revalidate property set to false. That's because this project uses on-demand revalidation instead of ISR. If you want to use ISR, you can set revalidate to a number of seconds. For example, to re-generate a page or post every 60 seconds, set revalidate to 60.
In my experience, ISR has the potential to overwhelm your server if you have a large site with a lot of traffic[2]. This is because pages/posts will be constantly querying WordPress in the background.
Next.js supports redirects. If you change the slug of a page or post, you can add a redirect to next.config.js redirect visitors to the new URL.
The current redirect forwards visitors from the /homepage path to the actual homepage:
// next.config.js
async redirects() {
return [
{
source: '/homepage',
destination: '/',
permanent: true
}
]
}Post reactions are supported. Simply click a "like", "dislike", or "love" icon on a blog post and you'll see the number increase.
Reactions are saved in the WordPress database as post meta, and can be easily edited in the "Post Fields" section under the WordPress block editor:
There is a WordPress plugin and theme that help support turing WordPress into a headless CMS.
By design, these helpers are lightweight and use old-school functional programming to keep things simple. If you need more robust functionality, please check out Faust.js.
They're both managed with Composer, so you can update them by running the following command from the /backend directory:
composer upgradeContributions to the plugin and theme are welcome!
Previewing pages and posts is supported. Simply click "preview" in the WordPress admin and you'll be taken to the frontend where you can see a preview.
Comments, Gravatars, nested comments, and comment moderation are all supported.
Note: Comments are held for moderation by default. You can change this in the WordPress admin under "Settings" > "Discussion".
GraphQL endpoint: https://nextjswp.test/graphql
GraphiQL IDE: https://nextjswp.test/wp-admin/admin.php?page=graphiql-ide
Inside docker-compose.yml there are several developer friendly constants you can enable to help with debugging. Feel free to add, remove, or change these values as needed.
# docker-compose.yml
WORDPRESS_DEBUG: 1 # Set to 0 to disable `WP_DEBUG`
WORDPRESS_CONFIG_EXTRA: |
define('WP_CACHE', false);
define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', true);
define('WP_MEMORY_LIMIT', '256M');
define('WP_ENVIRONMENT_TYPE', 'development');
define('HEADLESS_FRONTEND_URL', '${HEADLESS_FRONTEND_URL}');
define('PREVIEW_SECRET_TOKEN', '${PREVIEW_SECRET_TOKEN}');
define('WP_SITEURL', 'https://${WORDPRESS_URL}');
define('WP_HOME', 'https://${WORDPRESS_URL}');If you change the default values, run
docker-compose up -dto rebuild the containers.
WP-CLI is a command line interface for WordPress. It's a tool that makes it easy to manage WordPress sites.
First, tunnel into the wpcli container:
docker exec -it nextjs-wordpress-wpcli-1 /bin/shNow you can run WP-CLI commands against your WordPress installation.
For example:
wp --infoWill return:
OS: Linux 5.10.124-linuxkit #1 SMP PREEMPT Thu Jun 30 08:18:26 UTC 2022 aarch64
Shell:
PHP binary: /usr/local/bin/php
PHP version: 8.0.23
php.ini used:
MySQL binary: /usr/bin/mysql
MySQL version: mysql Ver 15.1 Distrib 10.6.9-MariaDB, for Linux (aarch64) using readline 5.1
SQL modes:
WP-CLI root dir: phar://wp-cli.phar/vendor/wp-cli/wp-cli
WP-CLI vendor dir: phar://wp-cli.phar/vendor
WP_CLI phar path: /var/www/html
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 2.6.0See the full list of WP-CLI commands at: https://developer.wordpress.org/cli/commands/
Composer is a dependency manager for PHP. It makes it easy to manage your project's dependencies.
First, tunnel into the composer container:
docker exec -it nextjs-wordpress-composer-1 /bin/shNow you can run Composer from inside the container.
For example, to validate the composer.json:
composer validateWill return:
./composer.json is validView the phpMyAdmin dashboard at http://localhost:8081/. No credentials are required.
View the Traefik dashboard at http://localhost:8080/dashboard/. No credentials are required.
If you need to bypass the pre-commit hooks, you can use the --no-verify flag:
git commit -m "My commit message" --no-verifyLearn more about Managing Docker