feat: upgrade graphql-starter to Next.js v14

Issue #601

Author: JohnAlbin

.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

.eslintrc.json

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

.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

.nvmrc

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

.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

.prettierrc.json

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

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>
+  )
+}

components/node--article.tsx renamed to 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"
         />
       )}

components/node--article--teaser.tsx renamed to 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

components/node--basic-page.tsx renamed to 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>