mention previews, rss, sitemaps. update setup instructions

README.md

@@ -14,12 +14,15 @@ Please consider it a starting point for your next headless WordPress project.
 - Tailwind CSS
 - WordPress data via GraphQL
 - Additional support for:
+  - Previews
   - Static site generation (SSG)
   - On-demand Revalidation
   - Custom Post Types
   - Custom Fields
   - Comments
   - Yoast SEO
+  - RSS Feed
+  - Sitemap
   - TypeScript, ESLint, Prettier, and Stylelint
 - Plus, it's really fast!
 
@@ -29,18 +32,6 @@ Please consider it a starting point for your next headless WordPress project.
 
 ## FAQ
 
-### What do I need for WordPress?
-
-You'll need either a local or public WordPress site with the following plugins:
-
-- [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) (free version is fine)
-- [Next.js WordPress Plugin](https://github.com/gregrickaby/nextjs-wordpress-plugin)
-- [Next.js WordPress Theme](https://github.com/gregrickaby/nextjs-wordpress-theme)
-- [WPGraphQL Yoast SEO](https://wordpress.org/plugins/add-wpgraphql-seo/)
-- [WPGraphQL for Advanced Custom Fields](https://www.wpgraphql.com/acf/)
-- [WPGraphQL](https://www.wpgraphql.com/)
-- [Yoast SEO](https://wordpress.org/plugins/wordpress-seo/)
-
 ### Is there a non-demo example?
 
 Yes! You can view a website running this code at <https://gregrickaby.com> ([github repo](https://github.com/gregrickaby/gregrickaby)).
@@ -55,7 +46,7 @@ Yes! I'm always interested in taking on headless WordPress projects. Send an ema
 
 ---
 
-## Development
+## Setup
 
 ### 1. Clone the repo
 
@@ -81,6 +72,9 @@ Customize the URLs in `.env.local` to match your WordPress setup:
 # WordPress GraphQL API URL. No trailing slash.
 NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL="https://wordpress.nextjswp.com/graphql"
 
+# Optional. JWT auth refresh token.
+#NEXTJS_AUTH_REFRESH_TOKEN=""
+
 # Preview Secret. Must match the constant in wp-config.php.
 NEXTJS_PREVIEW_SECRET="preview"
 
@@ -112,22 +106,90 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-### 5. Configure WordPress
+### 5. Configure `/lib/config.ts`
+
+Update the content to match your WordPress site:
+
+```ts
+const config = {
+  siteName: 'Next.js WordPress',
+  siteDescription: "It's headless WordPress!",
+  siteUrl: 'https://nextjswp.com'
+}
+```
+
+### 6. Configure WordPress
+
+You'll need either a local or public WordPress site with the following plugins:
+
+- [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) (free version is fine)
+- [Next.js WordPress Plugin](https://github.com/gregrickaby/nextjs-wordpress-plugin)
+- [Next.js WordPress Theme](https://github.com/gregrickaby/nextjs-wordpress-theme)
+- [WPGraphQL Yoast SEO](https://wordpress.org/plugins/add-wpgraphql-seo/)
+- [WPGraphQL for Advanced Custom Fields](https://www.wpgraphql.com/acf/)
+- [WPGraphQL JWT Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication) (optional)
+- [WPGraphQL](https://www.wpgraphql.com/)
+- [Yoast SEO](https://wordpress.org/plugins/wordpress-seo/)
 
-After installing the companion [plugin](https://github.com/gregrickaby/nextjs-wordpress-plugin) and [theme](https://github.com/gregrickaby/nextjs-wordpress-theme), add the following constants to your `wp-config.php` file:
+After installing all the plugins mentioned above, you'll need to add some constants to your `wp-config.php` file:
 
 ```php
 // The URL of your Next.js frontend. Include the trailing slash.
 define( 'NEXTJS_FRONTEND_URL', 'https://nextjswp.com/' );
 
+// Optional. JWT auth refresh token.
+//define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', '' );
+
 // Any random string. This must match the .env variable in the Next.js frontend.
 define( 'NEXTJS_PREVIEW_SECRET', 'preview' );
 
 // Any random string. This must match the .env variable in the Next.js frontend.
 define( 'NEXTJS_REVALIDATION_SECRET', 'revalidate' );
 ```
 
-### 6. Start the dev servers
+### 7. Optional. Authentication for Previews
+
+In order to query draft posts for Previews, you'll need to authenticate with WordPress. The following is a one-time step:
+
+- Install the [WPGraphQL JWT Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication) plugin
+- Go to **GraphQL -> GraphiQL IDE** in your WordPress admin
+- Copy the following and paste into GraphiQL IDE (replace `your_username` and `your_password` with your WordPress credentials)
+
+```graphql
+mutation Login {
+  login(
+    input: {
+      clientMutationId: "uniqueId"
+      password: "your_password"
+      username: "your_username"
+    }
+  ) {
+    refreshToken
+  }
+}
+```
+
+- Click the **Play** button in GraphiQL to run the mutation
+- Copy the `refreshToken` returned by the mutation
+- Open the Next.js `.env.local` file, and paste the `refreshToken` into the `NEXTJS_AUTH_REFRESH_TOKEN` variable. (Be sure to uncomment the variable by removing the `#` symbol.)
+
+```txt
+# Optional. JWT auth refresh token.
+NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"
+```
+
+- Generate a random string. I recommend using the [WordPress salt generator](https://api.wordpress.org/secret-key/1.1/salt/)
+- Copy the string
+- Open your `wp-config.php` file, and paste the string into the `GRAPHQL_JWT_AUTH_SECRET_KEY` constant. (Be sure to uncomment the constant by removing the `//` symbols.)
+
+```php
+// Optional. JWT auth refresh token.
+define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'some-random-string-generated-by-wp-salt' );
+```
+
+You should now be able to preview draft posts in your Next.js app by clicking the **Preview** button in your WordPress admin.
+
+### 8. Start the dev servers
 
 ```bash
 npm run dev
@@ -137,7 +199,7 @@ Once the dev server has started, you can view the front-end: <http://localhost:3
 
 ---
 
-## Querying WordPress with GraphQL
+## Querying WordPress data with GraphQL
 
 GraphQL is efficient because we can query multiple endpoints in a single request. If we were to use the WordPress REST-API, we would need to make multiple round trips to each respective endpoint.
 
@@ -218,7 +280,8 @@ export async function getPostBySlug(slug: string) {
     slug: slug
   }
 
-  // Fetch the data using a reusable fetch function.
+  // Fetch the data using a reusable fetch function. Next.js
+  // automatically memoizes and caches these requests.
   const response = await fetchGraphQL(query, variables)
 
   // Return the post.
@@ -232,6 +295,12 @@ This repo does not use a 3rd party GraphQL package, because Next.js automaticall
 
 ---
 
+### Going To Production
+
+Remember to add all the environment variables from `.env.local` to your production environment on [Vercel](https://vercel.com) or [Netlify](https://netlify.com).
+
+---
+
 ## Contributing
 
 Contributions are welcome! Please see the [contributing guidelines](./CONTRIBUTING.md) for more information.