Export WordPress Posts to Static HTML with Next.js

next.config.js

const fetch = require('isomorphic-unfetch')
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  webpack: (config) => {
    config.node = { fs: 'empty' }
    return config
  },
  exportPathMap: async (defaultPathMap) => {
    const [postList, projectList, pageList] = await Promise.all([
      fetch(WP_POST_URL).then(res => res.json()),
      fetch(WP_PROJECTS_URL).then(res => res.json()),
      fetch(WP_PAGES_URL).then(res => res.json())
    ])

    const posts = postList.reduce(
      (pages, post) =>
        Object.assign({}, pages, {
          [`/posts/${post.slug}`]: {
            page: '/posts/show',
            query: { slug: post.slug }
          }
        }),
      {}
    )

    const projects = projectList.reduce(
      (pages, project) =>
        Object.assign({}, pages, {
          [`/work/${project.slug}`]: {
            page: '/work/show',
            query: { slug: project.slug }
          }
        }),
      {}
    )

    const pages = pageList.reduce(
      (list, page) =>
        Object.assign({}, list, {
          [`/${page.slug}`]: {
            page: '/page',
            query: { slug: page.slug }
          }
        }),
      {}
    )

    return Object.assign({}, posts, pages, projects, {
      '/posts': {
        page: '/posts'
      },
      '/work': {
        page: '/work'
      },
      '/': {
        page: '/index'
      }
    })
  }
})