https://github.com/imranhsayed/nextjs-wordpress-theme
🎨 A Next.js WordPress theme that uses React in the front-end and WordPress in the backend - decoupled
https://github.com/imranhsayed/nextjs-wordpress-theme
Last synced: about 2 months ago
JSON representation
🎨 A Next.js WordPress theme that uses React in the front-end and WordPress in the backend - decoupled
- Host: GitHub
- URL: https://github.com/imranhsayed/nextjs-wordpress-theme
- Owner: imranhsayed
- Created: 2020-09-06T04:48:50.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-12T06:10:17.000Z (over 4 years ago)
- Last Synced: 2025-03-29T22:01:34.823Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 33
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🎨 Next.js WordPress theme - Celestia
[](https://www.repostatus.org/#active)
- A React theme for WordPress, using Decoupled Architecture in Next.js
- Front end in React
- Backend in WordPress.
### Evironment vars.
rename .env-example to .env and add your WordPress Site URL
### WordPress Setup
* Download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.
1. [wp-graphql](https://github.com/imranhsayed/nextjs-wordpress-theme/blob/master/wordpress/plugins/wp-graphql.zip) - tested on ( v1.0.0 )
2. [Headless CMS](https://github.com/imranhsayed/nextjs-wordpress-theme/blob/master/wordpress/plugins/headless-cms.zip)
3. [WP GraphQL Gutenberg](https://github.com/imranhsayed/nextjs-wordpress-theme/blob/master/wordpress/plugins/wp-graphql-gutenberg-0.3.4.zip)
# Development
```shell script
npm run dev # Runs next dev which starts Next.js in development mode
npm run build # Runs next build which builds the application for production usage
npm run start # Runs next start which starts a Next.js production server
```
# [Cypress Tests](https://docs.cypress.io/)
To run cypress locally we run `cypress-open`
It adds a `cypress` directory and some example test in `cypress/integrations`
```shell script
npm run cypress:open
```
* Cypress docs
1. [API](https://docs.cypress.io/api/api/table-of-contents.html)
## Debugging with Node.js debugger tool.
Notice that we have added this in `package.json`
```shell script
"dev": "NODE_OPTIONS='--inspect' next",
```
when you run `npm run dev`, you will see a node js icon in the Chrome inspector tab and there will also be a url to access it on the terminal
that says `Debugger listeing on ...`
## Important concepts
1. [Prerendering](https://nextjs.org/docs/basic-features/pages#pre-rendering)
2. Querying blocks:
[WP GraphQL Gutenberg](https://github.com/imranhsayed/nextjs-wordpress-theme/blob/master/wordpress/plugins/wp-graphql-gutenberg-0.3.4.zip) allows you to query Gutenberg blocks.
If you want to break down the blocks and render the content using individual React components, here is the query example.
```shell script
{
posts {
nodes {
title
blocks {
name
innerBlocks {
name
saveContent
}
saveContent
}
}
}
}
```