Get Started with Faust.js
WP Engine’s Faust.js Framework includes this example project, the FaustWP plugin, headless packages, and tutorials to make building headless WordPress sites fast and fun.
Explore this Example Project
This headless example project uses Next.js, GraphQL, GQty and the WP Engine headless packages for WordPress integration. Dive in and edit this template at src/pages/index.tsx or discover more below.
Static Site Generation
This example project uses Next.js' Static Site Generation (SSR). SSG unlocks better performance by statically generating pages that can then be cached by a CDN.
Incremental Static Regeneration
This example project uses Next.js' Incremental Static Regeneration (ISR). This allows you to revalidate static pages without having to rebuild your entire site. By default, Faust.js sets a 15 minute revalidate time per page.
Learn more about how Faust.js uses ISR.
Ready for Atlas
Atlas is the complete Headless WordPress Platform for absurdly fast dynamic sites. One headless solution, one price, all in one place.
Global Styles and Fonts
Add styles to load on every page, such as typography and layout rules, in src/scss/main.scss. The project adds normalize.css in src/pages/_app.tsx. Google Fonts are enqueued in src/pages/_document.tsx.
Hooks
Fetch data from WordPress with usePost, usePosts, useGeneralSettings and other custom hooks. Use these hooks in your page templates to pass data to custom components. See src/pages/index.tsx for examples.
Components
Add or edit components in the src/components folder. Find component styles at src/scss/components, which use CSS modules to scope CSS to each component.
Latest Posts
The Posts component in src/pages/index.tsx shows the latest six posts from the connected WordPress site.
Australia’s first design fair reveals just how collectible Australian design is
Never before has Australia experienced such a comprehensive design fair of its own country’s designers. The inaugural event captures a fascinating and exciting intersection of art and design culminating in decorative, functional pieces of imagination and innovation – especially where fabrication and material use is involved. As the first of its kind in Australia, the …
Test Post 2
This headless example project uses Next.js, GraphQL, GQty and the WP Engine headless packages for WordPress integration. Dive in and edit this template at src/pages/index.tsx or discover more below.
This is a test post
Headless CMSes are a part of a strategy to decouple different components of a web application from each other. Doing so allows for more flexibility – in general, you can more easily swap out one component in a collection of components than rewrite one portion of a monolithic app. It also means that developers can …
Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Questions or comments?
We welcome feature requests, bug reports and questions in the Headless Framework GitHub repository.