feat: upgrade graphql-starter to Next.js v14

Issue #601

starters/graphql-starter/.env.example

@@ -1,10 +1,15 @@
 # See https://next-drupal.org/docs/environment-variables
-NEXT_PUBLIC_DRUPAL_BASE_URL=https://dev.next-drupal.org
-NEXT_IMAGE_DOMAIN=dev.next-drupal.org
+
+# Required
+NEXT_PUBLIC_DRUPAL_BASE_URL=https://site.example.com
+NEXT_IMAGE_DOMAIN=site.example.com
 
 # Authentication
-DRUPAL_CLIENT_ID=
-DRUPAL_CLIENT_SECRET=
+DRUPAL_CLIENT_ID=Retrieve this from /admin/config/services/consumer
+DRUPAL_CLIENT_SECRET=Retrieve this from /admin/config/services/consumer
+
+# Required for Preview Mode
+DRUPAL_PREVIEW_SECRET=Retrieve this from /admin/config/services/next
 
 # Required for On-demand Revalidation
-DRUPAL_REVALIDATE_SECRET=secret
+DRUPAL_REVALIDATE_SECRET=Retrieve this from /admin/config/services/next

starters/graphql-starter/.eslintrc.json

@@ -1,4 +1,4 @@
 {
-  "extends": "next",
+  "extends": "next/core-web-vitals",
   "root": true
 }

starters/graphql-starter/.gitignore

@@ -4,14 +4,14 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
 # next.js
 /.next/
 /out/
-.next
 
 # production
 /build
@@ -20,19 +20,21 @@
 .DS_Store
 *.pem
 
+# IDE files
+/.idea
+/.vscode
+
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
 
-/certificates/*
+# typescript
+*.tsbuildinfo
+next-env.d.ts

starters/graphql-starter/.nvmrc

@@ -0,0 +1 @@
+v20

starters/graphql-starter/.prettierignore

@@ -0,0 +1,18 @@
+# Ignore everything.
+/*
+
+# Format most files in the root directory.
+!/*.js
+!/*.ts
+!/*.md
+!/*.json
+# But ignore some.
+/package.json
+/package-lock.json
+/CHANGELOG.md
+
+# Don't ignore these nested directories.
+!/app
+!/components
+!/lib
+!/pages

starters/graphql-starter/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "trailingComma": "es5"
+}

starters/graphql-starter/components/PreviewAlert.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react"
+import { useRouter } from "next/router"
+
+export function PreviewAlert() {
+  const router = useRouter()
+  const isPreview = router.isPreview
+  const [showPreviewAlert, setShowPreviewAlert] = useState<boolean>(false)
+
+  useEffect(() => {
+    setShowPreviewAlert(isPreview && window.top === window.self)
+  }, [isPreview])
+
+  if (!showPreviewAlert) {
+    return null
+  }
+
+  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")}
+        >
+          Exit preview mode
+        </button>
+      </p>
+    </div>
+  )
+}

starters/graphql-starter/components/node--article.tsx → starters/graphql-starter/components/drupal/Article.tsx

@@ -1,13 +1,12 @@
 import Image from "next/image"
+import { formatDate } from "@/lib/utils"
+import type { NodeArticle } from "@/types"
 
-import { formatDate } from "lib/utils"
-import { Article } from "types"
-
-interface NodeArticleProps {
-  node: Article
+interface ArticleProps {
+  node: NodeArticle
 }
 
-export function NodeArticle({ node, ...props }: NodeArticleProps) {
+export function Article({ node, ...props }: ArticleProps) {
   return (
     <article {...props}>
       <h1 className="mb-4 text-6xl font-black leading-tight">{node.title}</h1>
@@ -21,18 +20,19 @@ export function NodeArticle({ node, ...props }: NodeArticleProps) {
         <span> - {formatDate(node.created)}</span>
       </div>
       {node.image && (
-        <figure className="my-4">
+        <figure>
           <Image
             src={node.image.url}
             width={768}
-            height={480}
-            alt={node.title}
+            height={400}
+            alt=""
+            priority
           />
         </figure>
       )}
       {node.body?.processed && (
         <div
-          dangerouslySetInnerHTML={{ __html: node.body.processed }}
+          dangerouslySetInnerHTML={{ __html: node.body?.processed }}
           className="mt-6 font-serif text-xl leading-loose prose"
         />
       )}

starters/graphql-starter/components/node--article--teaser.tsx → starters/graphql-starter/components/drupal/ArticleTeaser.tsx

@@ -1,17 +1,16 @@
 import Image from "next/image"
 import Link from "next/link"
+import { formatDate } from "@/lib/utils"
+import type { NodeArticle } from "@/types"
 
-import { formatDate } from "lib/utils"
-import { Article } from "types"
-
-interface NodeArticleTeaserProps {
-  node: Partial<Article>
+interface ArticleTeaserProps {
+  node: Partial<NodeArticle>
 }
 
-export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
+export function ArticleTeaser({ node, ...props }: ArticleTeaserProps) {
   return (
     <article {...props}>
-      <Link href={node.path} className="no-underline hover:text-blue-600">
+      <Link href={node.path || ""} className="no-underline hover:text-blue-600">
         <h2 className="mb-4 text-4xl font-bold">{node.title}</h2>
       </Link>
       <div className="mb-4 text-gray-600">
@@ -21,20 +20,15 @@ export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
             <span className="font-semibold">{node.author.displayName}</span>
           </span>
         ) : null}
-        <span> - {formatDate(node.created)}</span>
+        {node.created && <span> - {formatDate(node.created)}</span>}
       </div>
       {node.image && (
         <figure className="my-4">
-          <Image
-            src={node.image.url}
-            width={768}
-            height={480}
-            alt={node.title}
-          />
+          <Image src={node.image.url} width={768} height={480} alt="" />
         </figure>
       )}
       <Link
-        href={node.path}
+        href={node.path || ""}
         className="inline-flex items-center px-6 py-2 border border-gray-600 rounded-full hover:bg-gray-100"
       >
         Read article

starters/graphql-starter/components/node--basic-page.tsx → starters/graphql-starter/components/drupal/BasicPage.tsx

@@ -1,10 +1,10 @@
-import { Page } from "types"
+import type { NodePage } from "@/types"
 
-interface NodeBasicPageProps {
-  node: Page
+interface BasicPageProps {
+  node: NodePage
 }
 
-export function NodeBasicPage({ node, ...props }: NodeBasicPageProps) {
+export function BasicPage({ node, ...props }: BasicPageProps) {
   return (
     <article {...props}>
       <h1 className="mb-4 text-6xl font-black leading-tight">{node.title}</h1>

starters/graphql-starter/components/layout.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link"
+import { PreviewAlert } from "@/components/PreviewAlert"
+import type { ReactNode } from "react"
 
-import { PreviewAlert } from "components/preview-alert"
-
-export function Layout({ children }) {
+export function Layout({ children }: { children: ReactNode }) {
   return (
     <>
       <PreviewAlert />

starters/graphql-starter/lib/drupal.ts

@@ -1,15 +1,17 @@
 import { DrupalClient } from "next-drupal"
 
-export const drupal = new DrupalClient(
-  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
-  {
-    previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
-    auth: {
-      clientId: process.env.DRUPAL_CLIENT_ID,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
-    },
-  }
-)
+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 previewSecret = process.env.DRUPAL_PREVIEW_SECRET
+
+export const drupal = new DrupalClient(baseUrl, {
+  auth: {
+    clientId,
+    clientSecret,
+  },
+  previewSecret,
+})
 
 export const graphqlEndpoint = drupal.buildUrl("/graphql")
 

starters/graphql-starter/next.config.js

@@ -1,7 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
   images: {
-    domains: [process.env.NEXT_IMAGE_DOMAIN],
+    remotePatterns: [
+      {
+        // protocol: 'https',
+        hostname: process.env.NEXT_IMAGE_DOMAIN,
+        // port: '',
+        // pathname: '/sites/default/files/**',
+      },
+    ],
   },
 }
 

starters/graphql-starter/package.json

@@ -8,25 +8,27 @@
     "build": "next build",
     "start": "next start",
     "preview": "next build && next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@tailwindcss/typography": "^0.5.8",
-    "next": "^13 || ^14",
+    "next": "^14",
     "next-drupal": "^1.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sharp": "^0.31.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.10",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.28.0",
-    "eslint-config-next": "^13.0.6",
-    "postcss": "^8.4.19",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^5.2.2"
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.3",
+    "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.2"
   }
 }