ISR Blog with Next.js and WordPress

This example demonstrates an Incremental Static Regeneration Blog using Next.js and WordPress as the data source.

Features:

• Incremental Static Regeneration (ISR) blog example.
• Utilizes WordPress as the data source.
• Provides a live demo at https://next-blog-wordpress.vercel.app.
• You can deploy your own instance.

How to Use:

Follow these steps to set up and use the example:

Step 1 – Prepare your WordPress site:

• You need a WordPress site.
• Install the WPGraphQL plugin to add a GraphQL API to your WordPress site.

Step 2 – Populate Content:

• Create at least 2 posts in your WordPress admin.
• Use dummy data for content.
• Add an author from your WordPress users.
• Include a Featured Image.
• Fill in the Excerpt field.
• Publish the posts.

Step 3 – Set up environment variables:

• Copy the .env.local.example file to .env.local.
• Set WORDPRESS_API_URL in .env.local to your WordPress GraphQL endpoint.

Step 4 – Run Next.js in development mode:

• Install dependencies with npm install or yarn install.
• Start the blog with npm run dev or yarn dev.

Step 5 – Add authentication for Preview Mode (Optional):

• This step is optional and involves setting up authentication for WPGraphQL.
• It allows access to unpublished posts.
• Requires adding the WPGraphQL JWT plugin to WordPress and configuring it.
• Follow additional instructions in the example for authentication.

Step 6 – Try preview mode:

• Create a new post in WordPress but do not publish it.
• Enable Preview Mode by visiting the specified URL with your secret and post ID.
• You can view the post in Preview Mode and exit when done.

Step 7 – Deploy on Vercel:

• Deploy your project to Vercel by pushing it to a Git repository and importing it to Vercel.
• Ensure that environment variables on Vercel match your .env.local file.

Demo and Deployment:

You can access the live demo here and deploy your own instance using the provided instructions.

Enjoy using this example for an ISR blog with Next.js and WordPress!