feat(basic-starter): upgrade starters to NextDrupal classes

Issue #601

Author: JohnAlbin

examples/example-router-migration/lib/drupal.ts

@@ -3,9 +3,9 @@ import {
   // NextDrupal
 } from "next-drupal"
 
-const baseUrl: string = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || ""
-const clientId = process.env.DRUPAL_CLIENT_ID || ""
-const clientSecret = process.env.DRUPAL_CLIENT_SECRET || ""
+const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
+const clientId = process.env.DRUPAL_CLIENT_ID as string
+const clientSecret = process.env.DRUPAL_CLIENT_SECRET as string
 
 export const drupal = new DrupalClient(baseUrl, {
   auth: {

starters/basic-starter/.gitignore

@@ -6,8 +6,7 @@
 .pnp.js
 .yarn/install-state.gz
 
-# build/test artifacts
-/.turbo
+# testing
 /coverage
 
 # next.js

starters/basic-starter/README.md

@@ -1,6 +1,6 @@
 # Basic Starter
 
-A simple starter for building your site with Next.js and Drupal.
+A simple starter for building your site with Next.js' Pages Router and Drupal.
 
 ## How to use
 

starters/basic-starter/components/Layout.tsx

@@ -1,27 +1,13 @@
-import Link from "next/link"
-import { PreviewAlert } from "@/components/PreviewAlert"
+import { HeaderNav } from "@/components/navigation/HeaderNav"
+import { PreviewAlert } from "@/components/misc/PreviewAlert"
 import type { ReactNode } from "react"
 
 export function Layout({ children }: { children: ReactNode }) {
   return (
     <>
       <PreviewAlert />
       <div className="max-w-screen-md px-6 mx-auto">
-        <header>
-          <div className="container flex items-center justify-between py-6 mx-auto">
-            <Link href="/" className="text-2xl font-semibold no-underline">
-              Next.js for Drupal
-            </Link>
-            <Link
-              href="https://next-drupal.org/docs"
-              target="_blank"
-              rel="external"
-              className="hover:text-blue-600"
-            >
-              Read the docs
-            </Link>
-          </div>
-        </header>
+        <HeaderNav />
         <main className="container py-10 mx-auto">{children}</main>
       </div>
     </>

starters/basic-starter/components/drupal/ArticleTeaser.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image"
-import Link from "next/link"
+import { Link } from "@/components/navigation/Link"
 import { absoluteUrl, formatDate } from "@/lib/utils"
 import type { DrupalNode } from "next-drupal"
 

starters/basic-starter/components/PreviewAlert.tsx renamed to starters/basic-starter/components/misc/PreviewAlert.tsx

@@ -14,13 +14,18 @@ export function PreviewAlert() {
     return null
   }
 
+  function buttonHandler() {
+    void fetch("/api/exit-preview")
+    setShowPreviewAlert(false)
+  }
+
   return (
     <div className="sticky top-0 left-0 z-50 w-full px-2 py-1 text-center text-white bg-black">
       <p className="mb-0">
         This page is a preview.{" "}
         <button
           className="inline-block ml-3 rounded border px-1.5 hover:bg-white hover:text-black active:bg-gray-200 active:text-gray-500"
-          onClick={() => router.push("/api/exit-preview")}
+          onClick={buttonHandler}
         >
           Exit preview mode
         </button>

starters/basic-starter/components/navigation/HeaderNav.tsx

@@ -0,0 +1,21 @@
+import { Link } from "@/components/navigation/Link"
+
+export function HeaderNav() {
+  return (
+    <header>
+      <div className="container flex items-center justify-between py-6 mx-auto">
+        <Link href="/" className="text-2xl font-semibold no-underline">
+          Next.js for Drupal
+        </Link>
+        <Link
+          href="https://next-drupal.org/docs"
+          target="_blank"
+          rel="external"
+          className="hover:text-blue-600"
+        >
+          Read the docs
+        </Link>
+      </div>
+    </header>
+  )
+}

starters/basic-starter/components/navigation/Link.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react"
+import NextLink from "next/link"
+import type { AnchorHTMLAttributes, ReactNode } from "react"
+import type { LinkProps as NextLinkProps } from "next/link"
+
+type LinkProps = NextLinkProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkProps> & {
+    children?: ReactNode
+  }
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  function LinkWithRef(
+    {
+      // Turn next/link prefetching off by default.
+      // @see https://github.com/vercel/next.js/discussions/24009
+      prefetch = false,
+      ...rest
+    },
+    ref
+  ) {
+    return <NextLink prefetch={prefetch} {...rest} ref={ref} />
+  }
+)

starters/basic-starter/lib/drupal.ts

@@ -1,12 +1,14 @@
-import { DrupalClient } from "next-drupal"
+import { NextDrupalPages } from "next-drupal"
 
-const baseUrl: string = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || ""
-const clientId = process.env.DRUPAL_CLIENT_ID || ""
-const clientSecret = process.env.DRUPAL_CLIENT_SECRET || ""
+const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
+const clientId = process.env.DRUPAL_CLIENT_ID as string
+const clientSecret = process.env.DRUPAL_CLIENT_SECRET as string
 
-export const drupal = new DrupalClient(baseUrl, {
+export const drupal = new NextDrupalPages(baseUrl, {
   auth: {
     clientId,
     clientSecret,
   },
+  useDefaultEndpoints: true,
+  // debug: true,
 })

starters/basic-starter/tsconfig.json

@@ -14,10 +14,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }