Getting Started with Next.js

Quick Start

Please install our Next.js Getting Started example using the following command:

On MacOS, Linux, or WSL (bash):

npx create-next-app \

-e https://github.com/wpengine/faustjs/tree/canary \

--example-path examples/next/getting-started \

--use-npm \

my-app

cd my-app

On Windows with Powershell:

npx create-next-app `

-e https://github.com/wpengine/faustjs/tree/canary `

--example-path examples/next/getting-started `

--use-npm `

my-app && cd my-app

Now, copy the sample environment template:

cp .env.sample .env

Finally, run the dev server:

npm run dev

You can now visit http://localhost:3000 to see the example site!

Currently, the posts and pages you see are coming from our WordPress site at https://headlessfw.wpengine.com. In the next step, we'll show you how to hook up your own WordPress site.

Connecting your WordPress site

The example app above loads WordPress content from the demo site at https://headlessfw.wpengine.com.

To point it to a different WordPress site, first, make sure you have setup the necessary WordPress plugins.

Once the necessary plugins have been installed, open the .env file you created earlier, it should look something like this:

# Your WordPress site URL

NEXT_PUBLIC_WORDPRESS_URL=https://headlessfw.wpengine.com

# Plugin secret found in WordPress Settings->Headless

WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

Update the NEXT_PUBLIC_WORDPRESS_URL value with your WordPress site URL (be sure to include http:// or https://).

Additionally, update the WP_HEADLESS_SECRET value with the secret key found in Settings → Headless in your WordPress admin area to support previews.