[experimental]: PoC Previews + Nextjs Implementation

[ahuseyn]

Implement Nextjs implementation for Faust previews with an example.

• Create a new Faust.js package by abstracting reusable parts.
• Implement simple App Password authentication.
• Support HWP Previews Plugin.

[ahuseyn]

Update:

Working branch is here: https://github.com/wpengine/faustjs/tree/next-add-previews-nextjs

There are couple of ways to enable headless WP previews on Nextjs app. One of them is to have a separate page to render previews on client side. Faust currently uses this method.
Another method is to reuse the existing catch-all route which uses SSG strategy. Nextjs provides a specific feature, called Draft Mode, to bypass the default SSG behavior and enable dynamic rendering. This feature adds a cookie to the browser, informing the server to put SSG on hold. Nextjs also provides an option to remove this cookie and resume the normal SSG behavior.

In this branch I've implemented the latter scenario. The branch includes these changes:

• Update graphql client package to support headers, so we can provide Authorization header
• Update template-hierarchy package to accept id and asPreview parameters for preview case, as previews work better with databaseID, rather than URI
• Add Nextjs preview example to demonstrate the use-case
• Add enablePreview handler utility to @faustjs/nextjs package, in order to abstract the draft mode enabling logic away from consumer. The utility itself is highly customizable.

These changes do not force a specific preview approach. The goal here is to provide an ready-made solution for users who want to quickly implement previews using Next.js Draft Mode.