A statically generated blog example using StepZen, Next.js, WordPress, and Cloudinary.

This example showcases Next.js's Static Generation feature using StepZen as the GraphQL data source, WordPress as the CMS, and Cloudinary for image hosting.

Demo

https://next-blog-wordpress.now.sh

Deploy your own

Once you have access to the environment variables you'll need, deploy the example using Vercel:

How to use

Table of Contents

1. Prepare your WordPress site
2. Populate Content
3. Import StepZen schemas
4. Setting up Cloudinary or Wordpress FeaturedImages
5. Connect Nextjs to StepZen
6. Add authentication to Wordpress Environment (optional)

---

Configuration

Step 1. Prepare your WordPress site

First, you need a WordPress site. There are many solutions for WordPress hosting, such as WP Engine and WordPress.com. DigitalOcean.com has a one-click wordpress installation.

Once the site is ready, the two highly recommended plugins for a scalable wordpress Headless CMS is Advanced Custom Fields and Yoast SEO plugin. Follow these steps to install it:

• Inside your WordPress admin, go to Plugins and then click Add New. Install the ACF and Yoast SEO plugins.

• Once the plugin has been added, activate it from either the Activate Plugin button displayed after uploading or from the Plugins page.

Add the following code to functions.php in appearance > theme editor. If you choose not to add it, the front-end will fail and you will need to substitute the featuredImage data in the /lib/api.js file.

// Expose featuredImage
function register_rest_images(){
    register_rest_field( array('post'),
        'featuredImage',
        array(
            'get_callback'    => 'get_rest_featured_image',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}
function get_rest_featured_image( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
        return $img[0];
    }
    return false;
}

add_action('rest_api_init', 'register_rest_images' );

Note: After populating content, visit http://your_site.com/wp-json/wp/v2/pages/ and cmd+f to ensure your featuredImage is populating.

Step 2. Populate Content

Inside your WordPress admin, go to Posts and start adding new posts:

• We recommend creating at least 2 posts
• Use dummy data for the content.
• Pick an author from your WordPress users
• Add a Featured Image. You can download one from Unsplash
• Fill the Excerpt field

When you’re done, make sure to Publish the posts.

Note: Only published posts and public fields will be rendered.

Step 3. StepZen Import

a. Import the wordpress schema. This should confirm that the StepZen CLI is running the schema on localhost:5000.

npm install -g stepzen
mkdir wp-stepzen
cd wp-stepzen
stepzen import wordpress cloudinary
# Add the auth configs for cloudinary. You can also add the configs later in your config.yaml
# The auth configurations are optional for wordpress. Press [Enter] to skip through those for now.

b. The index.graphql SDL should look like this.

schema
  @sdl(
    files: [
      "wordpress/posts.graphql"
      "wordpress/pages.graphql"
      # If you don't want to include cloudinary, comment it out.
      "cloudinary/cloudinary.graphql"
    ]
  ) {
  query: Query
}

c. Start up your Stepzen server

# In your root folder, run...
stepzen start

Ensure the endpoint is properly quering from the Wordpress RestAPI

{
  wordpressPages {
    id
    title
    content
    featuredImage
    slug
  }
  wordpressPosts {
    id
    title
    content
    featuredImage
    slug
  }
}

Step 4. Setting up Cloudinary or Wordpress FeaturedImages

If you want to use FeaturedImages rather than Cloudinary Images, remove all the cloudinaryImage queries found in /lib/api.js.

Adding Cloudinary Images

1. Add all the images you want to feature on your pages with the slug of the matching post and page.

Wordpress Post or Page url - https://yoursite.com/post/hello-world
Cloudinary Image Name (PublicId) - hello-world

2. Uncomment the cloudinaryImage data found on index.js and [slug].js for getStaticProps and coverImage.
3. Delete {post.featuredImage} found on index.js and [slug].js.
4. Save the project.

Step 5. Nextjs Configurations

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then open .env.local and set STEPZEN_API_URL to be the URL to your GraphQL endpoint in WordPress. For example: https://{stepzenid}.stepzen.net/tutorials/helloworld/__graphql.

Your .env.local file should look like this:

STEPZEN_API_URL=...
STEPZEN_AUTH_REFRESH_TOKEN=

Step 4. Run Next.js in development mode

# Clone the repository and run these commands in the root folder
npm install
npm run dev

# or

yarn install
yarn dev

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub Issues.

Step 5. Add authentication for Preview Mode (Optional)

This step is optional. By default, the blog will work with public posts from your WordPress site. Private content such as unpublished posts and private fields cannot be retrieved. To have access to unpublished posts you'll need to set up authentication.

install the miniOrange RestAPI Authentication, https://www.miniorange.com/wordpress-rest-api-authentication. Select Basic Authentication and choose the username:password type. Add the appropriate configuration variables below to your StepZen config.yaml file.

  - configuration:
      name: wordpress_config
      username: {{ username }}
      password: {{ password }}

Important: Redeploy your stepzen start endpoint to update the environment variables.

Step 7. Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

Deploy from Our Template

Alternatively, you can deploy using our template by clicking on the Deploy button below.