Nextjs Headless Wordpress

Overview

The Next.js Headless WordPress project is an active project that aims to provide a decoupled architecture for WordPress, using Next.js as the frontend and WordPress with WPGraphQL as the backend. This project offers a range of features including a home page, blog page, post page, post preview, post pagination, SEO component with Yoast SEO integration, Cypress for testing, Eslint for linting, Apollo Client with GraphQL API endpoints, header and footer integration with WordPress menu items, display of WordPress widgets on the Next.js frontend, integration of site title, tagline, and copyright text sourced from WordPress, Next.js Image component with image optimization, authentication with JWT and Http Only Cookie implementation, login feature for WP Post Preview in Next.js, incremental static re-generation for new static post pages, and support for Gutenberg styles. The project also includes a tutorial course and a live demo.

Features

• Home Page, Blog Page, Post Page
• Post Preview
• Post Pagination
• Load More Posts
• SEO Component with Yoast SEO and schema
• Cypress for tests, Eslint for linting
• Apollo Client with GraphQL API endpoints
• Header and Footer integration with WordPress Menu items
• Display of WordPress Widgets on Next.js frontend
• Site title, tagline, copyright text sourced from WordPress
• Next.js Image component with image optimization at request time
• Authentication with JWT and Http Only Cookie implementation
• Login feature for WP Post Preview in Next.js
• Incremental Static (Re)generation and automatic creation of new static post pages without having to re-build the Next.js application
• Support for Gutenberg styles

Installation

To set up the Next.js Headless WordPress project, follow these steps:

1. Clone or fork the repository and navigate to the project directory.
2. Install Docker from docs.docker.com/get-docker (this step may not be required if you are using your own WordPress setup).
3. Run the command ./nxtwp configure to set up the project.
4. The command will prompt you with a few questions. Answer accordingly:
   • If you would like to use this project’s WordPress Docker setup, enter “y” (make sure to install and activate all plugins from backend/plugins-collection).
   • If you want to use your own WordPress setup, enter “n”.
   • If you would like to use this project’s WordPress Docker setup, leave it blank.
   • If you are not going to use Disqus comments, leave it blank. Otherwise, enter your Disqus comments shortname.
5. The command will automatically:
   • Create the .env file in the frontend directory.
   • Setup WordPress backend with all the plugins via composer (if you chose “y” for the first question).
   • Install npm packages for the Next.js frontend and start the development server.
6. The WordPress backend will be available at http://localhost:8020 and the Next.js backend will be available at http://localhost:3000.
7. Make sure to activate all plugins installed by composer.
8. Update the block registry by going to WordPress Dashboard > GraphQL Gutenberg.
9. Update the permalink by going to Settings > Permalinks > Post name > Save.
10. Copy the content of the backend/wordpress/.htaccess file into your WordPress .htaccess file.

For more information, refer to the project Wiki.

Summary

The Next.js Headless WordPress project is an active project that aims to provide a decoupled architecture for WordPress, using Next.js as the frontend and WordPress with WPGraphQL as the backend. It offers a range of features including home page, blog page, and post page templates, post preview, post pagination, load more posts functionality, SEO component with Yoast SEO integration, Cypress for testing, Eslint for linting, Apollo Client with GraphQL API endpoints, integration of header and footer with WordPress menu items, display of WordPress widgets on the Next.js frontend, integration of site title, tagline, and copyright text sourced from WordPress, Next.js Image component with image optimization, authentication with JWT and Http Only Cookie implementation, login feature for WP Post Preview in Next.js, incremental static re-generation for new static post pages, and support for Gutenberg styles. The project also includes a tutorial course and a live demo. To set up the project, Docker is recommended, but it can also be used with a custom WordPress setup. Detailed installation instructions are provided in the documentation.