Scaling WordPress with the power of Next.js and the static web!
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starterAdd an .env.local file to the root with the following:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
The goal of this project is to take WordPress as a headless CMS and use Next.js to create a static experience without any 3rd party services that can be deployed anywhere.
The hope is to build out as many features as we can to support what's typically expected from an out of the box theme on WordPress. Currently, those features include:
- Blog https://next-wordpress-starter.netlify.app
- Pages (https://next-wordpress-starter.netlify.app/docs/)
- Posts (https://next-wordpress-starter.netlify.app/posts/voluptas-in-nemo-eaque-tempora-sit-quisquam/)
- Categories (https://next-wordpress-starter.netlify.app/categories/lorem/)
- Authors (https://next-wordpress-starter.netlify.app/authors/colby/)
- Search (Client side global navigation and https://next-wordpress-starter.netlify.app/search/?q=sit)
- RSS (https://next-wordpress-starter.netlify.app/feed.xml)
- Sitemap (https://next-wordpress-starter.netlify.app/sitemap.xml)
Additionally, the theme is expected to be SEO friendly and performant out of the box, including:
- Unique page titles
- Unique descriptions
- Open Graph tags
You can also optionally enable Yoast SEO plugin support to supercharge your SEO! (See below)
Check out the Issues for what's on deck!
Want something a little more basic? Check out my other starter with an MVP setup to get up and running with WPGraphQL in WordPress: https://github.com/colbyfayock/next-wpgraphql-basic-starter
This project makes use of WPGraphQL to query WordPress with GraphQL. In order to make that request to the appropriate endpoint, we need to set a environment variable to let Next.js know where to request the site information from.
Create a new file locally called .env.local and add the following:
WORDPRESS_GRAPHQL_ENDPOINT="[WPGraphQL Endpoint]"Replace the contents of the variable with your WPGraphQL endpoint. By default, it should resemble [Your Host]/graphql.
Note: environment variables can optionally be statically configured in next.config.js
| Name | Required | Default | Description |
|---|---|---|---|
| WORDPRESS_GRAPHQL_ENDPOINT | Yes | - | WordPress WPGraphQL endpoint (ex: host.com/graphl) |
| WORDPRESS_MENU_LOCATION_NAVIGATION | No | PRIMARY | Configures header navigation Menu Location |
| WORDPRESS_PLUGIN_SEO | No | false | Enables SEO plugin support (true, false) |
To start the project locally, run:
yarn dev
# or
npm run devThe project should now be available at http://localhost:3000!
In order to avoid an additional configuration file, we take advantage of some built-in properties of package.json to configure parts of the website.
| Name | Required | Description |
|---|---|---|
| homepage | Yes | Homepage or hostname used to construct full URLs (ex Open Graph) |
- homepage: Setting the
homepageproperty will update instances where the full URL is required such as Open Graph tags
This project aims to take advantage of as many built-in WordPress features by default like a typical WordPress theme. Those include:
| Name | Usage |
|---|---|
| Site Language | lang attribute on the <html> tag |
| Site Title | Homepage header, page metadata |
| Tagline | Homepage subtitle |
There is some specific WordPress configuration required to allow for the best use of this starter.
This Starter doesn't currently provide any mechanisms for dealing with image content from WordPress. The images are linked to "as is", meaning if the image is uploaded via the WordPress interface, the image will be served from WordPress.
To serve the images statically, you have a few options.
By enabling the Image Accelerator from Jetpack, your images will automatically be served statically and cached via the wp.com CDN. This feature comes free with the basic installation of Jetpack, requiring only that you connect the WordPress site to the Jetpack service.
The Yoast SEO plugin is partially supported including most major features like metadata and open graph customization.
- Yoast SEO plugin
- Add WPGraphQL SEO plugin
To enable the plugin, configure WORDPRESS_PLUGIN_SEO to be true either as an environment variable or within next.config.js.
Thanks goes to these wonderful people (emoji key):
 Colby Fayock 💻 📖 |
 Kevin Cunningham 💻 |
 Guillermo Angulo 💻 |
 Hein Snyman 💻 |
 Grische 🔧 |
 Jatin Rathee 💻 |
 Dave 💻 |
 Brad Garropy 💻 |
 Fábio Sales 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!