Upgrade starters to Next.js v14 #624

JohnAlbin · 2023-12-12T17:50:42Z

This pull request is for:

GitHub Issue: #601

Describe your changes

Upgrading the starters to use the App Router is going to involve a lot of changes, including adding Draft mode and possibly internationalization (with the removal of the context object).

To make it easier to review all the changes, this PR simply upgrades the starters to use the latest APIs and type definitions of Next.js v14 while still using the pages router. It's the first step to fully upgrade the starters.

vercel · 2023-12-12T17:50:47Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-drupal	⬜️ Ignored (Inspect)	Visit Preview		Dec 13, 2023 5:56pm

JohnAlbin

I've annotated my commits to make it easier to understand the work while reviewing the "Files changed".

JohnAlbin · 2023-12-13T05:12:13Z

starters/.gitignore

+# Starters should never have a lock file.
+package-lock.json
+pnpm-lock.yaml
+yarn.lock


By putting this in the root of starters/ directory, it prevents any lock files in any starter we ever have.

JohnAlbin · 2023-12-13T05:17:13Z

starters/basic-starter/.env.example

I updated this to match the format of the "Environment variables" admin page at admin/config/services/next/sites/[site]/env

I should note that DRUPAL_PREVIEW_SECRET isn't actually used by any code on the Next.js side. But we can look at that in a separate issue.

JohnAlbin · 2023-12-13T05:18:19Z

starters/basic-starter/.eslintrc.json

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


This is the new (more strict) ESLint config used by default with create-next-app

JohnAlbin · 2023-12-13T05:20:56Z

starters/basic-starter/.gitignore

+# typescript
+*.tsbuildinfo
+next-env.d.ts


This file was a copy of the .gitignore file generated by old versions of the create-next-app. I've updated this to use the new copy from the most recent create-next-app.

But I also added the "IDE files" section because I ❤️ PHPStorm and always have to add it the projects I work on.

JohnAlbin · 2023-12-13T05:26:14Z

starters/basic-starter/.prettierrc.json

+{
+  "semi": false,
+  "trailingComma": "es5"
+}


I added Prettier to the starters because I had issues running the starters in-place in the monorepo. And it was safer to copy the whole directory into a new place for development. But then it was difficult to ensure I was modifying the files that was still compatible with our code styles.

By adding Prettier to the starters, this gives the added feature to any user who doesn't like this code style (*cough* like me *cough*) that they can now easily change .prettierrc.json to use a code style that they do like and they can use the new "format" package script to re-write all the files to that new format in one easy step.

JohnAlbin · 2023-12-13T11:59:35Z

starters/basic-starter/yarn.lock

@@ -1,2180 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.


Don't add a yarn.lock file to a starter that is supposed to get the most up-to-date dependencies when a developer starts a new project.

JohnAlbin · 2023-12-13T12:04:51Z

starters/graphql-starter/.env.example

@@ -1,10 +1,15 @@
 # See https://next-drupal.org/docs/environment-variables


The changes to graphql-starter are almost identical to the changes in the basic-starter.

JohnAlbin · 2023-12-13T12:09:57Z

starters/basic-starter/components/PreviewAlert.tsx

+          onClick={() => router.push("/api/exit-preview")}
+        >
+          Exit preview mode
+        </button>


In preview-alert.tsx this was:

{/* eslint-disable @next/next/no-html-link-for-pages */} <a href="/api/exit-preview" className="text-white underline"> Click here </a>{" "} to exit preview mode.

But the semantics of a link are "take me to a new webpage" and that's not what that does. It's a button because clicking on it performs an action and not a location change. And don't get me started on "click here"!

This is a common accessibility issue, so I've changed element to a button.

JohnAlbin · 2023-12-13T12:14:47Z

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

-            height={480}
-            alt={node.title}
-          />
+          <Image src={node.image.url} width={768} height={480} alt="" />


The node title is not the alt text for its image. But I don't see that data in the GraphQL explorer, so an empty alt text is a more accessible option.

JohnAlbin · 2023-12-13T12:18:04Z

starters/graphql-starter/pages/[...slug].tsx

  if (!context?.params?.slug) {
    return {
      notFound: true,
    }
  }

  const data = await query<{
-    nodeByPath: Article
+    nodeByPath: NodeArticle | NodePage


This was actually a bug in the previous type definition. It should be an OR.

JohnAlbin · 2023-12-13T15:58:05Z

lol. Those 3 tests are failing again. Now with the opposite HTTP response code as the PR that changed them. :-p

getResource › it throws an error if revision access is forbidden

Expected substring: "401 Unauthorized
No authentication credentials provided."

Received message:   "403 Forbidden
The current user is not allowed to GET the selected resource. The user does not have access to the requested version."

starters/graphql-starter/components/layout.tsx

robdecker · 2023-12-13T17:41:22Z

starters/graphql-starter/components/layout.tsx

To be consistent, this should be Layout.tsx

Good catch! I didn't notice this on my Mac because the filename is Layout.tsx but git doesn't recognize the case change on a case-sensitive file system.

robdecker

Just the one file name change, then merge it.

Issue #601

robdecker

LGTM 👍

JohnAlbin requested a review from robdecker December 12, 2023 17:54

JohnAlbin force-pushed the 601-starters-v14 branch 3 times, most recently from 4ba9957 to d01d282 Compare December 13, 2023 11:49

JohnAlbin commented Dec 13, 2023

View reviewed changes

JohnAlbin mentioned this pull request Dec 13, 2023

fix(/starters/graphql-starter): add custom headers to support 4.6.0 r… #598

Merged

7 tasks

JohnAlbin force-pushed the 601-starters-v14 branch 2 times, most recently from 5587d22 to 13d8ea5 Compare December 13, 2023 16:48

robdecker reviewed Dec 13, 2023

View reviewed changes

starters/graphql-starter/components/layout.tsx Outdated Show resolved Hide resolved

robdecker reviewed Dec 13, 2023

View reviewed changes

robdecker requested changes Dec 13, 2023

View reviewed changes

JohnAlbin force-pushed the 601-starters-v14 branch 2 times, most recently from 7446125 to 7fd4e80 Compare December 13, 2023 17:53

JohnAlbin added 2 commits December 14, 2023 01:56

feat: upgrade basic-starter to Next.js v14

d9e5ebe

Issue #601

feat: upgrade graphql-starter to Next.js v14

841fcc1

Issue #601

JohnAlbin force-pushed the 601-starters-v14 branch from 7fd4e80 to 841fcc1 Compare December 13, 2023 17:56

JohnAlbin requested a review from robdecker December 13, 2023 18:06

robdecker approved these changes Dec 13, 2023

View reviewed changes

JohnAlbin merged commit 3561226 into main Dec 13, 2023
9 checks passed

JohnAlbin deleted the 601-starters-v14 branch December 13, 2023 18:42

JohnAlbin mentioned this pull request Dec 14, 2023

Image render error due to image domain configuration change in Next JS 13 #560

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade starters to Next.js v14 #624

Upgrade starters to Next.js v14 #624

JohnAlbin commented Dec 12, 2023

vercel bot commented Dec 12, 2023 •

edited

Loading

JohnAlbin left a comment •

edited

Loading

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin Dec 13, 2023

JohnAlbin commented Dec 13, 2023

robdecker Dec 13, 2023

JohnAlbin Dec 13, 2023

robdecker left a comment

robdecker left a comment

		@@ -1,2180 +0,0 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.

		@@ -1,10 +1,15 @@
		# See https://next-drupal.org/docs/environment-variables

Upgrade starters to Next.js v14 #624

Upgrade starters to Next.js v14 #624

Conversation

JohnAlbin commented Dec 12, 2023

Describe your changes

vercel bot commented Dec 12, 2023 • edited Loading

JohnAlbin left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JohnAlbin commented Dec 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robdecker left a comment

Choose a reason for hiding this comment

robdecker left a comment

Choose a reason for hiding this comment

vercel bot commented Dec 12, 2023 •

edited

Loading

JohnAlbin left a comment •

edited

Loading