example: Fetching data from Multiple WP sites (app router, fetch)

[moonmeister]

Description

Create an example on how to setup WordPress multisite with Next.js app router using the fetch api

This is a follow on task from #59 and PR #74

The example should act as a guide/reference to a HWP developer on how to implement multisite setup in Next.js app router using the fetch API.

Key Topics to Cover

WordPress Multisite Setup

• Example of implementing 2 different WordPress sites into one headless application
• Demostrate approaches to using different endpoints for the headless appllication to load different WordPress data (e.g. sites 1 or site 2)

Common WordPress Routes

• Front Page
• Home
• Singular (Post and Page)
• Category & Tag Archive
• CPT Single & Archive
• Attachment
• Search

Rendering

• CSR
• SSR
• SSG
• Hybrid between SSR and CSR

Other Features

• Pagination
• WPGraphQL Fragments & Mutations
• Persisted Queries

Demo

• Include a wp-env setup so developers can replicate the same WP setup as the example

Target Audience

• WordPress developers setting up multi-site headless applications.
• Frontend developers integrating WordPress multi-site into their single headless application.

[colinmurphy]

This is a proposal on what would be delivered as part of this issue. Please feel free to add suggestions or improvements.

Overview

In the example, we will use two sites to show how to fetch data in Next.js app router using fetch.
For demonstrating purposes we will have one site as a news site and the other as a recipes site (CPT).

We will use Tailwind CSS for styling.

What will the example contain?

• Homepage (Latest news and recipes)
• News (Blog listing)
• Recipes (Recipes listing)
• Single blog listing
• Single recipes page
• Category Archive
• Tag Archive (Tags will be applied to both sites)
• Attachment Post
• Search
• 404