next-wordpress

create ssg pages using next.js and wordpress. This packages has no extra dependancies when using with next.js.

Getting Started

1. yarn add next-wordpress

How

make sure to set the env vars BLOG_DOMAIN for middleware rewrites and BLOG_URL for the wordpress source.

BLOG_URL=https://a11ywatch.wpcomstaging.com
BLOG_DOMAIN=a11ywatch.blog

create a new folder in your pages directory called blog with a file called [...slug].tsx or [...slug].jsx and add the following below.

import type { GetStaticProps } from "next";
import React from "react";
import { WordPressPage, getBlogPage, BlogPageProps } from "next-wordpress";

function Blogs(props: BlogPageProps) {
  return <WordPressPage {...props} />;
}

export async function getStaticPaths() {
  return { paths: [], fallback: "blocking" };
}

export const getStaticProps: GetStaticProps = async (context) => {
  const { slug } = context.params ?? {};
  const websiteUrl = Array.isArray(slug) ? slug : [];
  let props = {};

  try {
    props = await getBlogPage(websiteUrl.join("/"));
  } catch (e) {
    console.error(e);
  }

  return {
    props,
    revalidate: 60 * 12 * 2,
  };
};

export default Blogs;

optional:

pages/blog/__middleware.ts

export { middleware } from "next-wordpress";