1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><meta content="website" property="og:type" data-next-head=""/><meta content="summary_large_image" property="twitter:card" data-next-head=""/><title data-next-head="">Introduction | Faust.js</title><meta content="Introduction" name="title" data-next-head=""/><meta content="Introduction" property="og:title" data-next-head=""/><meta content="Introduction" property="twitter:title" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." name="description" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." property="og:description" data-next-head=""/><meta content="Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js." property="twitter:description" data-next-head=""/><meta content="https://faustjs.org/docs/" property="og:url" data-next-head=""/><meta content="https://faustjs.org/docs/" property="twitter:url" data-next-head=""/><link href="/images/favicon-32x32.png" rel="icon" sizes="32x32"/><link href="/images/favicon-192x192.png" rel="icon" sizes="192x192"/><link href="https://faustjs.org/api/feeds/feed.json" rel="alternate" type="application/feed+json" title="WPGraphQL Blog JSON Feed"/><link href="https://faustjs.org/api/feeds/rss.xml" rel="alternate" type="application/rss+xml" title="WPGraphQL Blog XML Feed"/><link href="https://faustjs.org/api/feeds/feed.atom" rel="alternate" type="application/atom+xml" title="WPGraphQL Blog Atom Feed"/><link rel="preload" href="/_next/static/media/08ace62d6069e283-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/2ce92ab0f6458959.css" as="style"/><link rel="canonical" href="https://faustjs.org/docs/" data-next-head=""/>
1<script type="module" src="https://cdn.jsdelivr.net/npm/dialog-closedby-polyfill/index.js"></script>
1<link rel="stylesheet" href="/_next/static/css/2ce92ab0f6458959.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-2d1f61069a24c28b.js" defer=""></script>
1<script src="/_next/static/chunks/framework-78767669712fdeef.js" defer=""></script>
1<script src="/_next/static/chunks/main-0d1055d7f04c05f8.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-fb8c59a51fe4b116.js" defer=""></script>
1<script src="/_next/static/chunks/pages/docs/%5B%5B...slug%5D%5D-e4d5f6a283a93ea3.js" defer=""></script>
1<script src="/_next/static/FOEtxVaM3pDjl2xzwMS7U/_buildManifest.js" defer=""></script>
1<script src="/_next/static/FOEtxVaM3pDjl2xzwMS7U/_ssgManifest.js" defer=""></script>
1</head><body class="bg-gray-900 text-gray-200"><div id="__next"><div class="__variable_97fa79 font-inter flex min-h-screen flex-col selection:bg-purple-700"><a href="#main-content" class="faust-skip-link">Skip to main content</a><div class="container-blur-bg top-0 border-b-[1px] border-gray-800 bg-gray-900/80 sticky z-10 "><header class="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8"><div class="mr-8 flex items-center gap-8"><a class="transition-duration-75 flex items-center text-xl font-bold transition hover:text-white focus:text-white " href="/"><span class="mr-3"><svg fill="none" height="32" viewBox="0 0 128 128" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M28.48 3.52L3.52 28.486c-2.26 2.26-3.52 5.3-3.52 8.48V122A5.992 5.992 0 006 128h116c3.32 0 6-2.68 6-6.001V6.001C128 2.68 125.32 0 122 0H36.98c-3.18 0-6.24 1.26-8.48 3.52h-.02z" fill="url(#paint0_radial_145_9184)"></path><path d="M51.844 103a19.149 19.149 0 01-8.486-2.164 11.227 11.227 0 01-4.69-4.837 6.737 6.737 0 01-.4-4.81 6.781 6.781 0 012.917-3.854 7.718 7.718 0 015.2-1.003 7.752 7.752 0 014.633 2.563c1.282 1.737 1.328 3.064 2.275 3.064 1.83.028 4.206-13.065 5.525-20.112.548-2.907 1.133-5.897 1.82-8.868a.92.92 0 00-.826-1.133l-5.024-.39a1.663 1.663 0 01-1.096-.53 1.694 1.694 0 01-.455-1.132 4.428 4.428 0 01.232-1.839c.205-.585.53-1.123.966-1.578.474-.381 1.03-.66 1.625-.808a4.41 4.41 0 011.81-.074l1.477.139c1.402.084 1.932.046 2.582-.4.603-.427.752-1.16.938-1.875.269-1.087.529-2.164.798-3.324A71.14 71.14 0 0167.751 36.7c4.568-10.076 12.88-13.808 23.381-10.558 2.061.64 3.928 1.81 5.414 3.38a7.91 7.91 0 011.625 2.655 7.88 7.88 0 01.455 3.074 6.85 6.85 0 01-2.34 4.782 7.326 7.326 0 01-2.498 1.346 7.253 7.253 0 01-2.823.279 7.975 7.975 0 01-5.478-2.786 20.397 20.397 0 01-2.452-4.076c-.26-.51-.51-1.086-.78-1.523-.733-1.365-.975-.455-.975-.455l-4.624 21.422a.922.922 0 00.845 1.114l5.06.325c.372.019.734.167 1.013.428.278.25.464.594.529.965.176.622.204 1.282.074 1.913s-.4 1.226-.798 1.736a3.919 3.919 0 01-1.625.883c-.604.157-1.551.167-2.35.102l-.826-.084-1.087-.111c-2.302-.177-2.618.492-3.147 3.185-.223 1.17-.455 2.34-.669 3.51-1.021 5.283-2.061 10.743-3.52 16.017a37.575 37.575 0 01-5.05 11.087c-3.455 5.08-8.08 7.689-13.27 7.689h.01z" fill="#fff"></path><defs><radialGradient cx="0" cy="0" gradientTransform="rotate(45) scale(181.019)" gradientUnits="userSpaceOnUse" id="paint0_radial_145_9184" r="1"><stop stop-color="#0ECAD4"></stop><stop offset="1" stop-color="#7A45E5"></stop></radialGradient></defs></svg></span>Faust.js<span class="align-super text-xs font-light text-gray-500">â¢</span></a></div><div class="flex items-center gap-5 md:w-full md:justify-between"><nav class="flex items-center space-x-4 "><ul class="hidden flex-row space-x-4 pl-4 md:flex"><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="text-purple-500 block px-1 " href="/docs/">Docs</a></li><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="block px-1 " href="/blog/">Blog</a></li><li class="text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1"><a class="block px-1 " href="/showcase/">Showcase</a></li></ul><div data-headlessui-state=""><button class="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden" type="button" aria-expanded="false" data-headlessui-state=""><span class="sr-only hidden group-data-open:block">Open main nav</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="hidden size-6 group-data-open:block" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg><span class="sr-only group-data-open:hidden">Open main nav</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="size-6 group-data-open:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></nav><span class="flex gap-5"><button class="inline-flex items-center rounded-md bg-gray-800 px-2 py-1.5 text-sm font-medium text-gray-400 hover:bg-gray-700" type="button" aria-label="Search (shortcut: âK)"><span class="sr-only md:hidden">Open search</span>
1<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 text-gray-400 md:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><span class="hidden md:inline"><span class="pl-3">Search docs...</span><kbd class="ml-8 rounded-sm bg-gray-700 px-2 py-1 font-sans text-gray-400">â<!-- -->K</kbd></span></button><div class="hidden items-center space-x-4 md:flex"><a class="text-blue-500 text-gray-500 hover:text-gray-400 " href="https://github.com/wpengine/faustjs" rel="noopener noreferrer" target="_blank" title="GitHub"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a><a class="text-blue-500 text-gray-500 hover:text-gray-400 " href="/discord" rel="noopener noreferrer" target="_blank" title="Discord"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg></a></div></span></div></header></div><div class="fixed right-6 bottom-6 z-50 overflow-visible"><div id="ping" aria-hidden="true" class="motion-safe:animate-ping pointer-events-none absolute inset-0 -z-10 h-full w-full rounded-full bg-gray-200 "></div><button id="chat-button" type="button" class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-blue-800 text-white shadow-xl transition-transform hover:scale-105 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 md:right-8 md:bottom-12" aria-label="Open chat"><span class="sr-only">Open chat</span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.
1095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"></path></svg></button></div><div class="sticky top-[84px] z-5 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden" data-headlessui-state=""><button class="group flex items-center rounded-md px-2 py-1.5 text-white/70 hover:text-white" id="headlessui-disclosure-button-_R_d56_" type="button" aria-expanded="false" data-headlessui-state=""><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="relative z-20 hidden h-4 w-4 group-data-open:inline" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-4 w-4 group-data-open:hidden" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg><span class="pl-1">Menu</span></button></div><main id="main-content" class="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid" style="line-height:1.6em"><nav class="custom-scrollbar sticky top-[84px] hidden h-[calc(100vh-84px)] w-64 overflow-y-auto p-4 md:block"><a href="#docs-article" class="faust-skip-link">Skip navigation</a><ul class="my-1 " data-doc-nav-level="0"><li class="py-2 text-gray-400"><a class="text-blue-500 active " data-doc-nav-level="0" href="/docs/">Introduction</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/tutorial/learn-faust/">Learn Faust.js</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/how-to/">How-To Guides</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/basic-setup/">Basic Setup</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/authentication/">Authentication</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/customize-the-toolbar/">Customize the Toolbar</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/generate-types-with-graphql-codegen/">Generate types with GraphQL Codegen</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/rendering-blocks/">Rendering Blocks</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/custom-blocks/">Custom Blocks</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/post-previews/">Post Previews</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/sitemaps/">Sitemaps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/create-a-plugin/">Create A Plugin</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/use-wpgraphql-smart-cache/">Using WPGraphQL Smart Cache</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/query-data-in-the-browser/">Query Data in the Browser</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/query-data-in-nextjs-routes/">Query Data in Next.js Routes</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/how-to/setup-cpt-in-faustjs/">Custom Post Types</a></li></ul></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/reference/">Reference</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400">
1<a class="" data-doc-nav-level="1" href="/docs/reference/faust-plugin-system-filters/">Faust Plugin System Filters</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/from-theme-json/">fromThemeJson</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-next-server-side-props/">getNextServerSideProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-next-static-props/">getNextStaticProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-site-map-props/">getSiteMapProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-styles/">getStyles</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/get-wordpress-props/">getWordPressProps</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-auth/">useAuth</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-blocks-theme/">useBlocksTheme</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-login/">useLogin</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/use-logout/">useLogout</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/with-faust/">withFaust</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/wordpress-blocks-provider/">WordPressBlocksProvider</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/wordpress-blocks-viewer/">WordPressBlocksViewer</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/reference/blockset/">blockset</a></li></ul></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="0" href="/docs/explanation/">Explanation</a><ul class="my-1 ml-2 border-l-[1px] border-gray-800 pl-3 " data-doc-nav-level="1"><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/telemetry/">Telemetry</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/seed-query/">Seed Query</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/blocks-faq/">WordPress Blocks FAQ</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/apollo-client-basics/">Apollo Client Basics</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/deploy-your-app/">Deploying Your App</a></li><li class="py-2 text-gray-400"><a class="" data-doc-nav-level="1" href="/docs/explanation/migrate-from-wp-graphql-gutenberg/">Migrate from wp-graphql-gutenberg</a></li></ul></li></ul></nav><nav class="sticky top-[84px] order-last hidden h-[calc(100vh-84px)] w-[240px] overflow-y-auto p-6 lg:block"><h2 class="py-2 font-semibold">On This Page</h2><ul class="mt-4 text-sm text-gray-400"><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#what-is-faustjs">What is Faust.js®?</a></li><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#main-features">Main Features</a></li><li class="w-full py-2 break-words whitespace-normal "><a class="" href="#how-to-use-these-docs">How to Use These Docs</a></li></ul><div class="my-6 border-t border-gray-700"></div><a class="text-xs leading-loose font-normal text-gray-400 no-underline hover:text-blue-500 " href="https://github.com/wpengine/faustjs/edit/canary/docs//index.md" rel="noopener noreferrer" target="_blank">Edit this doc on GitHub<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></nav><div class="container-main xs:py-20 min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8"><nav class="flex flex-wrap items-center gap-2 text-sm mt-4 mb-7 md:mt-2 md:mb-10 "><span>Docs</span></nav><article id="docs-article" class="prose prose-invert"><h1 class="article-title break-words">Introduction</h1><h2 id="what-is-faustjs" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#what-is-faustjs">What is Faust.js®?<svg stroke="currentColor" fill="none" stroke-width="1.5" viewB
1ox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2> 2<p>Faust.js® is a set of tools that make it easy to build headless WordPress apps with Next.js. Accordingly, while there are many features of Faust.js®, you are able to pick and choose those you need for your project.</p> 3<p>From data fetching to Block components, Faust.js® has you covered. Build your headless WordPress app with confidence, knowing that you have the tools you need to get the job done.</p> 4<h2 id="main-features" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#main-features">Main Features<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2> 5<p>Some of the main Faust.js® features include:</p> 6<table><thead><tr><th>Feature</th><th>Description</th></tr></thead><tbody><tr><td><a class="text-blue-500 " href="/docs/explanation/seed-query/">Template Hierarchy</a></td><td>Automatically resolve WordPress content to the right template, just like classic PHP</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/authentication/">Authentication</a></td><td>Authenticate users in your Next.js app with WordPress</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/rendering-blocks/">Block Components</a></td><td>Render WordPress blocks in your Next.js app</td></tr><tr><td><a class="text-blue-500 " href="/docs/how-to/post-previews/">Post Preview</a></td><td>Preview posts and pages in your Next.js app before publishing them</td></tr></tbody></table> 7<h2 id="how-to-use-these-docs" class="group flex items-center hover:text-blue-500"><a class="break-all no-underline transition-colors group-hover:text-blue-500 " href="#how-to-use-these-docs">How to Use These Docs<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="ml-2 inline-block size-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"></path></svg></a></h2> 8<p>These docs are designed to help you get started with Faust.js®. Here are some of the main sections you can explore:</p> 9<ul> 10<li><a class="text-blue-500 " href="/docs/tutorial/">Tutorials</a> - Tutorials are best when you are looking to learn about what Faust offers.</li> 11<li><a class="text-blue-500 " href="/docs/how-to/">How To</a> - How-to guides are best when you are looking to implement a specific feature or integration.</li> 12<li><a class="text-blue-500 " href="/docs/reference/">API Reference</a> - Reference docs are best when you need details on how to use a specific Faust API.</li> 13<li><a class="text-blue-500 " href="/docs/explanation/">Explanation</a> - Explanations are best when you want to learn more about a specific feature or topic.</li> 14</ul> 15<div class="callout" data-callout="note" data-collapsible="false"><div class="callout-title"><div class="callout-title-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg></div><div class="callout-title-text">Learn More</div></div><div class="callout-content"><p>For more info on how we lay out our documentation, please read about the <a class="text-blue-500 " href="https://diataxis.fr/foundations/#serving-needs" rel="nofollow" target="_blank"><em>Diátaxis</em><span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a> approach we use.</p></div></div></article></div></main><footer class="bg-gray-950 px-8 pb-14 lg:px-16 lg:pb-24"><div class="container-main container-max prose prose-invert container border-t border-gray-900"><div class="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24"><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">Downloads</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/cli" rel="noopener noreferrer" target="_blank">@faustwp/cli<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/core" rel="noopener noreferrer" target="_blank">@faustwp/core<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.npmjs.com/package/@faustwp/blocks" rel="noopener noreferrer" target="_blank">@faustwp/blocks<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp" rel="noopener noreferrer" target="_blank">Faust.js Companion Plugin<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/wp-graphql-content-blocks" rel="noopener noreferrer" target="_blank">WPGraphQL Content Blocks<span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">Community</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://github.com/wpengine/faustjs?ref=faustjs" rel="noopener noreferrer" target="_blank">Github<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://twitter.com/wpengine" rel="noopener noreferrer" target="_blank">Twitter<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://www.youtube.com/channel/UCh1WuL54XFb9ZI6m6goFv1g" rel="noopener noreferrer" target="_blank">YouTube<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="/discord" rel="noopener noreferrer" target="_blank">Discord<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div><div class="col-span-1 flex flex-col gap-4"><h6 class="font-bold uppercase tracking-wider text-gray-300">WP Engine</h6><ul class="my-0 list-none ps-0"><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/legal/privacy/" rel="noopener noreferrer" target="_blank">Privacy Policy<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/builders/headless" rel="noopener noreferrer" target="_blank">Developers<span>
15<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.careers/?ref=faustjs" rel="noopener noreferrer" target="_blank">We're Hiring!<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li><li class="my-0 space-y-2 ps-0"><a class="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200 " href="https://wpengine.com/headless-wordpress/?ref=faustjs" rel="noopener noreferrer" target="_blank">Headless Hosting<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></li></ul></div></div><div class="mt-2 text-gray-400 lg:mt-24"><p>Powered by <a class="font-normal text-gray-200 no-underline " href="/">Faust.js</a> & WP Engine's <a class="font-normal text-gray-200 no-underline " href="https://wpengine.com/headless-wordpress/" rel="noopener noreferrer" target="_blank">Headless platform<span><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="inline h-[1em] max-h-4 w-[1em] max-w-4 align-text-top" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"></path></svg></span></a></p><p class="text-gray-400">© 2013-<!-- -->2026<!-- --> WP Engine, Inc. All rights reserved.</p></div></div></footer><dialog id="search-dialog" class="mx-auto mt-[10vh] bg-transparent p-0 backdrop:backdrop-blur-sm md:mt-[20vh]" closedby="any"><section class="relative w-[85dvi] max-w-3xl rounded-lg bg-gray-800 p-4 md:w-[70vw] md:p-6"><div class="relative"><input id="search-input" aria-haspopup="listbox" aria-controls="search-results" autofocus="" type="text" placeholder="What are you searching for?" aria-label="Search input" class="w-full rounded-sm border border-gray-700 bg-gray-700 p-2 pr-10 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" value=""/><button type="button" class="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white" aria-label="Close search"><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg></button></div></section></dialog><dialog id="chat-dialog" role="application" class="fixed right-4 bottom-18 left-auto z-20 w-[92dvw] max-w-xl overflow-visible rounded-lg bg-gray-800 p-4 md:right-8 md:bottom-32 md:p-6" closedby="any"><button type="button" form="chat-form" aria-label="Close chat" class="absolute -top-2 -right-2 text-gray-400 hover:text-gray-300" formMethod="dialog"><span class="sr-only">Close chat</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 cursor-pointer text-gray-200 hover:text-red-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"></path></svg></button><section><div id="chat" class="flex h-full w-full flex-col gap-4"><div class="custom-scrollbar flex max-h-[calc(92dvh-12em)] flex-grow flex-col gap-4 overflow-y-scroll md:max-h-[calc(80dvh-12em)] -mr-2 pr-4 pb-12 md:-mr-4 " aria-live="polite" role="log"><div class="rounded-bl-sm bg-purple-900 prose prose-invert slide-in-bottom message-glow w-fit max-w-[90%] rounded-xl p-2 shadow-md transition-shadow duration-200 first:mt-0 last:mb-0 hover:shadow-lg "><p>Hey there! I'm an AI driven chat assistant here to help you with Faust.js! I'm trained on the documentation and can help you with coding tasks, learning, and more. What can I assist you with today?</p></div><div></div></div><form id="chat-form" class="absolute bottom-0 left-0 w-[calc(100%-theme(sp
15acing.[1.5]))] bg-gradient-to-b from-transparent via-gray-800 to-gray-800 p-4 md:p-6"><div class="flex w-full items-end justify-between gap-2"><input id="chat-input" type="text" wrap="soft" autofocus="" placeholder="Ask about Faust..." class="no-scrollbar text-md w-full max-w-full rounded-xl bg-gray-700 p-2 text-wrap text-gray-200 placeholder-gray-400 shadow-lg transition-colors focus:ring-2 focus:ring-teal-500 focus:outline-none" value=""/><button type="submit" class="enabled:bg-hero-gradient ml-auto cursor-pointer rounded-xl bg-gray-700 p-2 text-gray-400 shadow-lg enabled:text-gray-200" aria-label="Send message" disabled=""><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"></path></svg></button></div></form></div></section></dialog></div></div>
15<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"id":"mdx:4a67bd26402fc5154544d6c1ff5e863f6e354135","source":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n div: \"div\",\n em: \"em\",\n h2: \"h2\",\n li: \"li\",\n line: \"line\",\n p: \"p\",\n path: \"path\",\n svg: \"svg\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ul: \"ul\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h2, {\n id: \"what-is-faustjs\",\n children: \"What is Faust.js®?\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Faust.js® is a set of tools that make it easy to build headless WordPress apps with Next.js. Accordingly, while there are many features of Faust.js®, you are able to pick and choose those you need for your project.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"From data fetching to Block components, Faust.js® has you covered. Build your headless WordPress app with confidence, knowing that you have the tools you need to get the job done.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"main-features\",\n children: \"Main Features\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Some of the main Faust.js® features include:\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Feature\"\n }), _jsx(_components.th, {\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"/docs/explanation/seed-query/\",\n children: \"Template Hierarchy\"\n })\n }), _jsx(_components.td, {\n children: \"Automatically resolve WordPress content to the right template, just like classic PHP\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"/docs/how-to/authentication/\",\n children: \"Authentication\"\n })\n }), _jsx(_components.td, {\n children: \"Authenticate users in your Next.js app with WordPress\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"/docs/how-to/rendering-blocks/\",\n children: \"Block Components\"\n })\n }), _jsx(_components.td, {\n children: \"Render WordPress blocks in your Next.js app\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"/docs/how-to/post-previews/\",\n children: \"Post Preview\"\n })\n }), _jsx(_components.td, {\n children: \"Preview posts and pages in your Next.js app before publishing them\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"how-to-use-these-docs\",\n children: \"How to Use These Docs\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"These docs are designed to help you get started with Faust.js®. Here are some of the main sections you can explore:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"/docs/tutorial/\",\n children: \"Tutorials\"\n }), \" - Tutorials are best when you are looking to learn about what Faust offers.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"/docs/how-to/\",\n children: \"How To\"\n }), \" - How-to guides are best when you are looking to implement a specific feature or integration.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"/docs/reference/\",\n children: \"API Reference\"\n }), \" - Reference docs are best when you need details on how to use a specific Faust API.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"/docs/explanation/\",\n children: \"Explanation\"\n }), \" - Explanations are best when you want to learn more about a specific feature or topic.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.div, {\n className: \"callout\",\n \"data-callout\": \"note\",\n \"data-collapsible\": \"false\",\n children: [_jsxs(_components.div, {\n className: \"callout-title\",\n children: [_jsx(_components.div, {\n className: \"callout-title-icon\",\n \"aria-hidden\": \"true\",\n children: _jsxs(_components.svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"1em\",\n height: \"1em\",\n viewB
15ox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n children: [_jsx(_components.line, {\n x1: \"18\",\n y1: \"2\",\n x2: \"22\",\n y2: \"6\"\n }), _jsx(_components.path, {\n d: \"M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z\"\n })]\n })\n }), _jsx(_components.div, {\n className: \"callout-title-text\",\n children: \"Learn More\"\n })]\n }), _jsx(_components.div, {\n className: \"callout-content\",\n children: _jsxs(_components.p, {\n children: [\"For more info on how we lay out our documentation, please read about the \", _jsx(_components.a, {\n href: \"https://diataxis.fr/foundations/#serving-needs\",\n rel: \"nofollow\",\n target: \"_blank\",\n children: _jsx(_components.em, {\n children: \"Diátaxis\"\n })\n }), \" approach we use.\"]\n })\n })]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{"title":"Introduction","description":"Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js."},"scope":{"toc":[{"value":"What is Faust.js®?","href":"#what-is-faustjs","depth":2,"numbering":[1,1],"parent":"root"},{"value":"Main Features","href":"#main-features","depth":2,"numbering":[1,2],"parent":"root"},{"value":"How to Use These Docs","href":"#how-to-use-these-docs","depth":2,"numbering":[1,3],"parent":"root"}]}},"docsNavData":[{"title":"Introduction","route":"/docs/"},{"title":"Learn Faust.js","route":"/docs/tutorial/learn-faust/"},{"title":"How-To Guides","route":"/docs/how-to/","children":[{"title":"Basic Setup","route":"/docs/how-to/basic-setup/"},{"title":"Authentication","route":"/docs/how-to/authentication/"},{"title":"Customize the Toolbar","route":"/docs/how-to/customize-the-toolbar/"},{"title":"Generate types with GraphQL Codegen","route":"/docs/how-to/generate-types-with-graphql-codegen/"},{"title":"Rendering Blocks","route":"/docs/how-to/rendering-blocks/"},{"title":"Custom Blocks","route":"/docs/how-to/custom-blocks/"},{"title":"Post Previews","route":"/docs/how-to/post-previews/"},{"title":"Sitemaps","route":"/docs/how-to/sitemaps/"},{"title":"Create A Plugin","route":"/docs/how-to/create-a-plugin/"},{"title":"Using WPGraphQL Smart Cache","route":"/docs/how-to/use-wpgraphql-smart-cache/"},{"title":"Query Data in the Browser","route":"/docs/how-to/query-data-in-the-browser/"},{"title":"Query Data in Next.js Routes","route":"/docs/how-to/query-data-in-nextjs-routes/"},{"title":"Custom Post Types","route":"/docs/how-to/setup-cpt-in-faustjs/"}]},{"title":"Reference","route":"/docs/reference/","children":[{"title":"Faust Plugin System Filters","route":"/docs/reference/faust-plugin-system-filters"},{"title":"fromThemeJson","route":"/docs/reference/from-theme-json"},{"title":"getNextServerSideProps","route":"/docs/reference/get-next-server-side-props"},{"title":"getNextStaticProps","route":"/docs/reference/get-next-static-props"}
15,{"title":"getSiteMapProps","route":"/docs/reference/get-site-map-props"},{"title":"getStyles","route":"/docs/reference/get-styles"},{"title":"getWordPressProps","route":"/docs/reference/get-wordpress-props"},{"title":"useAuth","route":"/docs/reference/use-auth"},{"title":"useBlocksTheme","route":"/docs/reference/use-blocks-theme"},{"title":"useLogin","route":"/docs/reference/use-login"},{"title":"useLogout","route":"/docs/reference/use-logout"},{"title":"withFaust","route":"/docs/reference/with-faust"},{"title":"WordPressBlocksProvider","route":"/docs/reference/wordpress-blocks-provider"},{"title":"WordPressBlocksViewer","route":"/docs/reference/wordpress-blocks-viewer"},{"title":"blockset","route":"/docs/reference/blockset"}]},{"title":"Explanation","route":"/docs/explanation/","children":[{"title":"Telemetry","route":"/docs/explanation/telemetry/"},{"title":"Seed Query","route":"/docs/explanation/seed-query/"},{"title":"WordPress Blocks FAQ","route":"/docs/explanation/blocks-faq/"},{"title":"Apollo Client Basics","route":"/docs/explanation/apollo-client-basics/"},{"title":"Deploying Your App","route":"/docs/explanation/deploy-your-app/"},{"title":"Migrate from wp-graphql-gutenberg","route":"/docs/explanation/migrate-from-wp-graphql-gutenberg/"}]}]},"__N_SSG":true},"page":"/docs/[[...slug]]","query":{},"buildId":"FOEtxVaM3pDjl2xzwMS7U","isFallback":false,"isExperimentalCompile":false,"gsp":true,"locale":"en","locales":["en"],"defaultLocale":"en","scriptLoader":[]}</script>
15</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.