Fixes: Added next.config section to Post Previews doc and fixed typos/flow in the Basic setup doc

src/pages/docs/how-to/basic-setup/index.mdx

@@ -6,28 +6,32 @@ export const metadata = {
 
 In order to leverage any of the tools in the Faust.js toolkit, some preliminary setup needs to be done. Follow the steps below to get started.
 
-## Steps
+## 0. Prerequisites
 
-### Set up a WordPress backend and a Next.js frontend
+Before you begin, you'll need:
 
-If you don't have one up and running already, create a new WordPress site. This can be a site running [on your local machine](https://localwp.com/), or one hosted on the web somewhere.
+- A WordPress site (local or remote), if you don't have one yet, we recommend setting up a local WordPress development environment.
+- A Next.js project, if you don't have a Next.js project yet, [create one](https://nextjs.org/docs/getting-started/installation) on your local computer.
 
-Likewise, if you don't have a Next.js project yet, [create one](https://nextjs.org/docs/getting-started/installation) on your local computer.
+> [!INFO]- local WordPress development
+> There are lots of options for setting up a local WordPress development environment. Some popular choices include [LocalWP](https://localwp.com/), [`wp-env`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/), or [MAMP](https://www.mamp.info/en/).
 
-### Activate plugins
+## 1. Set up a WordPress backend and a Next.js frontend
+
+### A. Install plugins
 
 Install and activate the [FaustWP](https://wordpress.org/plugins/faustwp/) and [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) plugins on your WordPress backend site.
 
-### Set environment variables
+### B. Set environment variables
 
 Create a `.env.local` file in the root of your Next.js project that contains these environment variables:
 
 ```ini title=".env.local"
 # Your WordPress site URL
-NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com // [!code ++]
+NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com
 
 # Plugin secret found in WordPress Settings->Faust
-FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET // [!code ++]
+FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET
 ```
 
 Replace `https://faustexample.wpengine.com` with the URL for your WordPress backend.
@@ -38,17 +42,17 @@ Replace `YOUR_PLUGIN_SECRET` with the Secret Key found in `Settings → Faust` i
 
 Save your `.env.local` file.
 
-## Install dependencies
+### C. Install dependencies
 
-Install the `@apollo/client`, gql and `@faustwp/core` NPM packages in your Next.js app.
+Install the required NPM packages in your Next.js app.
 
 ```bash
 npm install @apollo/client @faustwp/core graphql @faustwp/cli
 ```
 
-## Create Faust config file
+### D. Create Faust config file
 
-Create a `faust.config` file in the root of your project with this code:
+Create a `faust.config.js` file in the root of your project with this code:
 
 ```js title="faust.config.js"
 import { setConfig } from "@faustwp/core";
@@ -65,7 +69,7 @@ export default setConfig({
 });
 ```
 
-### Create Faust API route
+### E. Create Faust API route
 
 Create an API route for Faust.js to use. You can do this by creating a file in `pages/api/faust/[[...route]].js`, with the following code:
 
@@ -75,7 +79,7 @@ import "../../../faust.config";
 export { apiRouter as default } from "@faustwp/core";
 ```
 
-### Update `_app.js` file
+### F. Update `_app.js` file
 
 Once the API router is set up, head to `pages/_app.js` and add this code to the file:
 
@@ -95,9 +99,9 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-## Set up the Template Hierarchy
+## 2. Set up the Template Hierarchy
 
-### Generate types
+### A. Generate types
 
 In order for Faust.js to run the GraphQL queries it needs to determine the correct template to use, it needs to have a list of all the types available in the GraphQL schema. We'll generate this list of types now.
 
@@ -118,7 +122,7 @@ Run `npm run generate` on the command line. Confirm that a possibleTypes.json ha
 > [!IMPORTANT] Important
 > Be sure to enable WPGraphQL introspection before running the `npm run generate` command since it is [disabled by default](https://www.wpgraphql.com/docs/security#introspection-disabled-by-default).
 
-### Add a template
+### B. Add a template
 
 Create a new `wp-templates` folder in the root of your project. This is where your template files will be stored. We'll start by adding a template for rendering single blog posts.
 
@@ -172,27 +176,7 @@ const templates = {
 export default templates;
 ```
 
-### Pass in Templates and Types in Faust.js config
-
-Put the following code inside your Faust.js config:
-
-```js title="faust.config.js"
-import { setConfig } from "@faustwp/core";
-import templates from "./wp-templates/index.js";
-import possibleTypes from "./possibleTypes.json";
-
-/**
- * @type {import('@faustwp/core').FaustConfig}
- **/
-export default setConfig({
-	templates,
-	possibleTypes,
-});
-```
-
-Here, we call the `setConfig()` function that Faust.js provides, passing in our `templates` and `possibleTypes` to it.
-
-### Create a catch-all route
+### C. Create a catch-all route
 
 Create a `[...wordpressNode].js` file inside your `pages` folder. Add the following code to it.
 
@@ -219,15 +203,15 @@ This catch-all route tells Next.js to use the templates to render pages.
 
 Note that it is still possible to override this with hardcoded pages. For example, if you have a page in your WordPress site with a URI of `/about`, Faust.js will render that page using the relevant template in your project's `wp-templates` folder. However, if you add a `pages/about.js` file to your project, Next.js will render the `/about` path in your app using that file instead.
 
-## Test your template
+### D. Test your template
 
 You should now be able to make use of this template.
 
-Run `npm run dev` to get your Next.js project running in development mode, then visit the URL for one of the blog posts– something like `http://localhost:3000/blog/hello-world/`.
+Run `npm run dev` to get your Next.js project running in development mode, then visit the URL for one of the blog posts. The default starter blog path in WordPress is the "hello world" one – `http://localhost:3000/hello-world/`.
 
 If you've wired everything up correctly, the page should render and display the post's title and content.
 
-### Next steps
+## 3. Next steps
 
 You are now ready to leverage Faust's other features, including:
 

src/pages/docs/how-to/post-previews/index.mdx

@@ -6,9 +6,7 @@ export const metadata = {
 
 When editing content in the [WordPress editor](https://wordpress.com/support/wordpress-editor/), content creators can click the **Preview** link to preview what the content will look like on the frontend before the post has been published. This docs page outlines how to set up post previews in a headless WordPress app.
 
-## Steps
-
-### Prerequisites
+## 0. Prerequisites
 
 Ensure that you have completed the steps in the following pages before proceeding.
 
@@ -18,7 +16,7 @@ Ensure that you have completed the steps in the following pages before proceedin
 
 Implementing authentication is necessary so that Faust.js "knows" whether the current user has the permissions necessary to view draft posts. Template hierarchy support is necessary so that Faust.js can query for draft blog post data and render it using the appropriate page template.
 
-### Step 1. Update the `_app.js` file
+## 1. Update the `_app.js` file
 
 Navigate to `pages/_app.js` file and import your `faust.config.js` file that you have created in the previous steps like so:
 
@@ -39,7 +37,54 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-### Step 2. Create Preview Page
+## 2. Update the `next.config.js` file
+
+Before we update the next config, we will need to install the [next-secure-headers](https://www.npmjs.com/package/next-secure-headers) package that we will use in it.
+
+In your terminal, run the following command:
+
+```bash
+npm install next-secure-headers
+```
+
+Now that we have that installed, go to the root of your project and update your `next.config.js` file with this code:
+
+```js {1,2, 12-14, 16-25, 28} title="next.config.js"
+const { withFaust, getWpHostname } = require("@faustwp/core");
+const { createSecureHeaders } = require("next-secure-headers");
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const config = {
+	reactStrictMode: true,
+	sassOptions: {
+		includePaths: ["node_modules"],
+	},
+	images: {
+		domains: [getWpHostname()],
+	},
+
+	async headers() {
+		return [
+			{
+				source: "/:path*",
+				headers: createSecureHeaders({
+					xssProtection: false,
+				}),
+			},
+		];
+	},
+};
+
+module.exports = withFaust(config);
+```
+
+This configuration integrates Next.js with your headless WordPress setup by using the `withFaust` function to manage authenticated preview modes.
+
+The `getWpHostname` function then passes your WordPress instance's hostname, enabling Next.js to optimize and serve images from WordPress in both published and preview modes. Finally, the `createSecureHeaders` function generates essential security headers to protect your application from cross-site scripting (XSS) attacks.
+
+## 3. Create Preview Page
 
 With your headless secret set and the `authorizeHandler` ready to handle requests, you can now create a Next.js [page](https://nextjs.org/docs/basic-features/pages) for previews. Create a file at `pages/preview.js` with the following code:
 
@@ -55,7 +100,7 @@ In this code block, We are using the `WordPressTemplate` component from `@faustw
 
 Just a note, we don't use the `getWordPressProps` here as opposed in some other `wp-template` pages as we want to perform post previews in the client using CSRs.
 
-### Step 3. Add Preview Data to Your WPGraphQL Queries Within Templates
+## 4. Add Preview Data to Your WPGraphQL Queries Within Templates
 
 Now that we have everything set up, it is time to add post previews to your WPGraphQL queries. Navigate to your `wp-templates` folder. You should have a `single.js` from the template hierarchy step. This `single.js` file is the component that is responsible for rendering post-type data from WordPress. In your `single.js` file, add this code block:
 
@@ -102,7 +147,7 @@ This approach allows for dynamic previews of WordPress content directly on the f
 
 If the `asPreview` parameter is not required for a specific template, you can omit it, effectively disabling previews for that component.
 
-### Step 4. Navigating to Preview Pages
+## 5. Navigating to Preview Pages
 
 > [!TIP] For Safari Users
 >