Use Faust.js in existing Next.js installation

[EnablingLogic]

Hi! I'm eager to start using Faust.js, but I can't find any documentation regarding using my existing Next.js installation with Faust.js. Is that because that's not possible and I should create a new project based on Faust.js and continue from there? Or can I just install certain packages, create certain directories, etc. to get started with my existing installation?

[theodesp]

Hey @EnablingLogic It would be possible to start using Faust.js on an existing Next.js installation.

1. You will have to include Faust.js dependencies:

"@apollo/client": "^3.6.6",
"@faustwp/cli": "^2.0.0",
"@faustwp/core": "^2.1.2",
"graphql": "^16.6.0",

2. Then create a faust.config.js in the root folder

// faust.config.js
import { setConfig } from '@faustwp/core';
import templates from './wp-templates';
import possibleTypes from './possibleTypes.json';

/**
 * @type {import('@faustwp/core').FaustConfig}
 **/
export default setConfig({
  templates,
  plugins: [],
  experimentalToolbar: true,
  possibleTypes,
});

3. use the following package.json scripts

//package.json

"scripts": {
    "dev": "faust dev",
    "build": "faust build",
    "generate": "faust generatePossibleTypes",
    "stylesheet": "faust generateGlobalStylesheet",
    "start": "faust start"
  },

4. Then import the FaustProvider into the _app.js

import '../faust.config';
import React from 'react';
import { useRouter } from 'next/router';
import { FaustProvider } from '@faustwp/core';
import '@faustwp/core/dist/css/toolbar.css';

export default function MyApp({ Component, pageProps }) {
const router = useRouter();

return (
  <FaustProvider pageProps={pageProps}>
    <Component {...pageProps} key={router.asPath} />
  </FaustProvider>
);
}

5. Add the faust API route:

// pages/api/faust/[[...route]].js

import '../../../faust.config';
import { apiRouter } from '@faustwp/core';

export default apiRouter;

Now if you are using the WordPress Template system you need to add the [...wordPressNode].js component

https://github.com/wpengine/faustjs/blob/canary/examples/next/faustwp-getting-started/pages/%5B...wordpressNode%5D.js

And add your WordPress Templates:

https://github.com/wpengine/faustjs/tree/canary/examples/next/faustwp-getting-started/wp-templates

[EnablingLogic]

Awesome, thanks! Might be worth it to include this in the documentation. I can imagine there are more people who'd want to harness the power of Faust.js in their existing application. 😊