feat: upgrade basic-starter to Next.js v14

Issue #601

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

starters/basic-starter/components/layout.tsx → 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>
+  )
+}

starters/basic-starter/components/node--article.tsx → 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 && (

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

@@ -1,14 +1,13 @@
 import Image from "next/image"
 import Link from "next/link"
-import { DrupalNode } from "next-drupal"
+import { absoluteUrl, formatDate } from "@/lib/utils"
+import type { DrupalNode } from "next-drupal"
 
-import { absoluteUrl, formatDate } from "lib/utils"
-
-interface NodeArticleTeaserProps {
+interface ArticleTeaserProps {
   node: DrupalNode
 }
 
-export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
+export function ArticleTeaser({ node, ...props }: ArticleTeaserProps) {
   return (
     <article {...props}>
       <Link href={node.path.alias} className="no-underline hover:text-blue-600">

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

@@ -1,10 +1,10 @@
-import { DrupalNode } from "next-drupal"
+import type { DrupalNode } from "next-drupal"
 
-interface NodeBasicPageProps {
+interface BasicPageProps {
   node: DrupalNode
 }
 
-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/basic-starter/lib/drupal.ts

@@ -1,8 +1,14 @@
 import { DrupalClient } from "next-drupal"
 
-export const drupal = new DrupalClient(
-  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
-  {
-    previewSecret: process.env.DRUPAL_PREVIEW_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,
+})

starters/basic-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/basic-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"
   }
 }