Requirements

Shifter Headless ( must enable FaustWP and WPGraphQL plugins)
Node
Vercel

Set up Shifter Headless

Get a WordPress URL and secret key for FaustWP

Create Shifter Headless site

Copy WordPress URL

Enable WP GraphQL and FaustWP plugin then copy a credential

Navigate to [Settings] --> [Headless]

Copy [Secret Key]

Edit permalink

Change permalink structure to /posts/%postname%/

Modify WP GraphQL settings

Navigate to GraphQL menu, then check [Enable Public Introspection].

Please make sure WordPress is running.

Create an app on local

Follow Quick Start Doc on Getting Started with Next.js | Faust.js (faustjs.org)

Create workspace

Run the following command:

npx create-next-app \
 -e https://github.com/wpengine/faustjs/tree/main \
 --example-path examples/next/getting-started \
 --use-npm \
 my-app
cd my-app

Edit .env.local

Rename .env.local.sample to .env.local.

Change value of NEXT_PUBLIC_WORDPRESS_URL and FAUSTWP_SECRET_KEY

# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://{site-id}.hl-a.getshifter.co

# Plugin secret found in WordPress Settings->Headless
FAUSTWP_SECRET_KEY={secret-key-on-WordPress}

Make a test by running dev

Run the command: npm run dev to build local server.

% npm run dev

> next-headless-getting-started@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from ~/Faustjs/my-appc/.env.local
event - compiled client and server successfully in 3.4s (475 modules)
wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 632 ms (532 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 172 ms (540 modules)

Access development environment

Access http://localhost:3000 to confirm the sever fetches contents from Shifter Headless container.

Pushing files to Git repository

Create a git repository on GitHub, GitLab or Bitbucket, and push your local files.

On this document the repository ShifterHeadless-Faust-Vercel on GitHub.

Click [New] on GitHub or other Git service.

https://github.com/new

Copy the repository's URL.

Add the repository's URL as a remote


% git remote add origin git@github.my-github-account/ShifterHeadless-Faust-Vercel.git

% git remote -v
origin	git@github.com:my-github-account/ShifterHeadless-Faust-Vercel.git (fetch)
origin	git@github.com:my-github-account/ShifterHeadless-Faust-Vercel.git (push)

Then push it.

% git push origin main
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 16 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 570 bytes | 570.00 KiB/s, done.
Total 4 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:my-github-account/ShifterHeadless-Faust-Vercel.git
   90ce35a..863d1d4  main -> main

Set up Vercel

Login to Vercel dashboard

https://vercel.com/dashboard

Connect your Vercel project and git repository

Almost done.

After importing the repository, Vercel will start deployment.

If it doesn't start, push some updates to the branch. In this sample, it's a main branch.

Access the provided domain name end with .vercel.app

You'll get posts on your deployed site.

That's all!