docs(next-drupal): updated learn section

Author: Marco Monti

www/content/tutorials/draft-mode/configure-content-types.mdx

@@ -2,20 +2,20 @@
 title: Configure Content Types
 excerpt: Configure preview for content types
 weight: 150
-group: Preview Mode
+group: Draft Mode
 ---
 
-Next, we need to configure preview mode for the content types. This will display an inline preview in an iframe when you visit the content pages.
+Next, we need to configure draft mode for the content types. This will display an inline draft in an iframe when you visit the content pages.
 
 ---
 
-## Configure Preview
+## Configure Draft
 
-To enable content preview inside Drupal, we need to configure a site resolver for the **Article** content type.
+To enable content draft inside Drupal, we need to configure a site resolver for the **Article** content type.
 
 <Callout>
 
-A _site resolver_ tells Drupal how to resolve the preview URL for an entity.
+A _site resolver_ tells Drupal how to resolve the draft URL for an entity.
 
 </Callout>
 

www/content/tutorials/draft-mode/configure-draft-routes.mdx

@@ -0,0 +1,39 @@
+---
+title: Configure Draft Routes
+excerpt: Draft routes in Next.js
+weight: 140
+group: Draft Mode
+---
+
+Implement draft mode using two API routes.
+
+<Callout>
+
+If you're using the Basic Starter, draft routes are already created for you.
+
+</Callout>
+
+## /app/api/draft/route.ts
+
+```ts title=app/api/draft/route.ts
+import { drupal } from "@/lib/drupal"
+import { enableDraftMode } from "next-drupal/draft"
+import type { NextRequest } from "next/server"
+
+export async function GET(request: NextRequest): Promise<Response | never> {
+  return enableDraftMode(request, drupal)
+}
+```
+
+---
+
+## /app/api/disable-draft/route.ts
+
+```ts title=app/api/disable-draft/route.ts
+import { disableDraftMode } from "next-drupal/draft"
+import type { NextRequest } from "next/server"
+
+export async function GET(request: NextRequest) {
+  return disableDraftMode()
+}
+```

www/content/tutorials/draft-mode/configure-preview-routes.mdx

@@ -2,7 +2,7 @@
 title: Create OAuth Client
 excerpt: Setup an OAuth client to be used for authenticated content.
 weight: 110
-group: Preview Mode
+group: Draft Mode
 ---
 
 Before we can create an OAuth consumer, we need to create a new role and a user for OAuth scopes.
@@ -38,7 +38,7 @@ We are assigning the _Bypass content access control_ permission to allow Next.js
 This scope is only going to be used when making authenticated requests from Next.js to Drupal.
 
 ```ts
-const articles = await drupal.getResource(
+const article = await drupal.getResource(
   "node--article",
   "dad82fe9-f2b7-463e-8c5f-02f73018d6cb",
   // highlight-start
@@ -108,20 +108,17 @@ DRUPAL_CLIENT_SECRET=
 
 ---
 
-## 7. Update DrupalClient
+## 7. Update NextDrupal client.
 
-Update the `DrupalClient` to use the **Bearer** authentication header.
+Update the `NextDrupal` to use the **Bearer** authentication header.
 
 ```ts title=lib/drupal.ts
-import { DrupalClient } from "next-drupal"
-
-export const drupal = new DrupalClient(
-  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
-  {
-    auth: {
-      clientId: process.env.DRUPAL_CLIENT_ID,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
-    },
-  }
-)
+import { NextDrupal } from "next-drupal"
+
+export const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
+  auth: {
+    clientId: process.env.DRUPAL_CLIENT_ID,
+    clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+  },
+})
 ```

www/content/tutorials/draft-mode/create-oauth-client.mdx

@@ -2,19 +2,19 @@
 title: Create Next.js site
 excerpt: Create a Next.js site on Drupal
 weight: 105
-group: Preview Mode
+group: Draft Mode
 ---
 
-Start by creating a Next.js site so that we can render the preview on Drupal.
+Start by creating a Next.js site so that we can render the draft on Drupal.
 
 1. Visit `/admin/config/services/next`.
 2. Click **Add Next.js site**.
 3. Fill in the following values:
 
 - **Label**: `Next.js`
 - **Base URL**: `http://localhost:3000`
-- **Preview URL**: `http://localhost:3000/api/preview`
-- **Preview secret**: `secret`
+- **Draft URL (or Preview URL)**: `http://localhost:3000/api/draft`
+- **Secret key**: `secret`
 
 <Callout>
 

www/content/tutorials/draft-mode/create-site.mdx

@@ -1,10 +1,10 @@
 ---
 title: Done
 weight: 160
-group: Preview Mode
+group: Draft Mode
 ---
 
-Congratulations. You have successfully configured preview mode for your content types.
+Congratulations. You have successfully configured draft mode for your content types.
 
 You should see the iframe preview when you visit your content pages.
 

www/content/tutorials/draft-mode/done.mdx

@@ -5,7 +5,7 @@ weight: 10
 group: Quick Start (GraphQL)
 ---
 
-This tutorial will help you get started with Next.js for Drupal using the [`DrupalClient`](/docs/client) and **GraphQL**.
+This tutorial will help you get started with Next.js for Drupal using the [`NextDrupal`](/docs/client) and **GraphQL**.
 
 <Callout>
 

www/content/tutorials/graphql/index.mdx

@@ -5,6 +5,16 @@ weight: 350
 group: On-demand Revalidation
 ---
 
+<!--
+************************************************************
+*  TODO: Remove this block before publishing.
+
+*  Comment: The revalidator plugin used to work out of the box with path-based revalidation. However, Next.js implemented Tag-based revalidation, which is
+pretty useful for revalidating Menus on the FE whenever a Drupal Menu is updating. I'm just leaving this comment to note this, since I do not know
+if the new version of drupal module supports this out of the box.
+************************************************************
+-->
+
 Next, we need to configure on-demand revalidation for the entity types.
 
 To enable on-demand revalidation for an entity type, we need to configure a **revalidator** plugin.

www/content/tutorials/on-demand-revalidation/configure-entity-types.mdx

@@ -5,44 +5,43 @@ weight: 360
 group: On-demand Revalidation
 ---
 
-Implement on-demand revalidation using an API routes at `/revalidate`.
+Implement on-demand revalidation using an API route at `/revalidate`.
 
 <Callout>
 
 If you're using the Basic Starter, revalidate route are already created for you. You can skip this step.
 
 </Callout>
 
-## /pages/api/revalidate.ts
+## /app/api/revalidate/route.ts
 
-```ts title=pages/api/revalidate.ts
-import { NextApiRequest, NextApiResponse } from "next"
+```ts title=app/api/revalidate/route.ts
+import { revalidatePath } from "next/cache"
+import type { NextRequest } from "next/server"
 
-export default async function handler(
-  request: NextApiRequest,
-  response: NextApiResponse
-) {
-  let slug = request.query.slug as string
-  const secret = request.query.secret as string
+async function handler(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const path = searchParams.get("path")
+  const secret = searchParams.get("secret")
 
   // Validate secret.
   if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) {
-    return response.status(401).json({ message: "Invalid secret." })
+    return new Response("Invalid secret.", { status: 401 })
   }
 
-  // Validate slug.
-  if (!slug) {
-    return response.status(400).json({ message: "Invalid slug." })
+  // Validate path.
+  if (!path) {
+    return new Response("Invalid path.", { status: 400 })
   }
 
   try {
-    await response.revalidate(slug)
+    revalidatePath(path)
 
-    return response.json({})
+    return new Response("Revalidated.")
   } catch (error) {
-    return response.status(404).json({
-      message: error.message,
-    })
+    return new Response((error as Error).message, { status: 500 })
   }
 }
+
+export { handler as GET, handler as POST }
 ```

www/content/tutorials/on-demand-revalidation/configure-revalidate-route.mdx

@@ -5,7 +5,7 @@ weight: 50
 group: Quick Start
 ---
 
-The `next-drupal` plugin uses paths to resolve resources for `getStaticProps`. To make this work, we need to configure path aliases for our content types.
+The `next-drupal` plugin uses paths to resolve resources for the Next.js Frontend. To make this work, we need to configure path aliases for our content types.
 
 Let's add a pattern for the **Article** content type.