Requirements

Set up Shifter Headless

Get a WordPress URL and secret key of FaustWP

Create Shifter Headless site

Copy WordPress URL

Enable WP GraphQL and FaustWP plugin then copy a credential

Login to WordPress dashboard, then enable FaustWP and other necessary plugins such as WP GraphQL.

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‚Äč 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 Git Hub, 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 servcie

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, the Vercel buiids a deployment.

If it doesn't start, pushing 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 the deployed site.

That's all!

Did this answer your question?