feat: upgrade basic-starter to Next.js v14

Issue #601

Author: JohnAlbin

starters/.gitignore

@@ -0,0 +1,4 @@
+# Starters should never have a lock file.
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

starters/basic-starter/.env.example

@@ -1,6 +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=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/basic-starter/.eslintrc.json

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

starters/basic-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/basic-starter/.nvmrc

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

starters/basic-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/basic-starter/.prettierrc.json

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

…ters/basic-starter/components/layout.tsx …ters/basic-starter/components/Layout.tsxstarters/basic-starter/components/layout.tsx renamed to starters/basic-starter/components/Layout.tsx starters/basic-starter/components/layout.tsx renamed to starters/basic-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/basic-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>
+  )
+}

…sic-starter/components/node--article.tsx …ic-starter/components/drupal/Article.tsxstarters/basic-starter/components/node--article.tsx renamed to starters/basic-starter/components/drupal/Article.tsx starters/basic-starter/components/node--article.tsx renamed to starters/basic-starter/components/drupal/Article.tsx

@@ -1,13 +1,12 @@
 import Image from "next/image"
-import { DrupalNode } from "next-drupal"
+import { absoluteUrl, formatDate } from "@/lib/utils"
+import type { DrupalNode } from "next-drupal"
 
-import { absoluteUrl, formatDate } from "lib/utils"
-
-interface NodeArticleProps {
+interface ArticleProps {
   node: DrupalNode
 }
 
-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>
@@ -26,7 +25,7 @@ export function NodeArticle({ node, ...props }: NodeArticleProps) {
             src={absoluteUrl(node.field_image.uri.url)}
             width={768}
             height={400}
-            alt={node.field_image.resourceIdObjMeta.alt}
+            alt={node.field_image.resourceIdObjMeta.alt || ""}
             priority
           />
           {node.field_image.resourceIdObjMeta.title && (