Upgrade to Next.js 14 (vercel#1224)

thomasledoux1 · Oct 27, 2023 · 2448f52 · 2448f52
1 parent 80e4800
commit 2448f52
Show file tree

Hide file tree

Showing 10 changed files with 407 additions and 393 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -27,6 +27,6 @@ jobs:
           key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
       - name: Install dependencies
         if: steps.node-modules-cache.outputs.cache-hit != 'true'
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
       - name: Run tests
         run: pnpm test
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import Navbar from 'components/layout/navbar';
+import { GeistSans } from 'geist/font';
 import { ensureStartsWith } from 'lib/utils';
-import { Inter } from 'next/font/google';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
 
@@ -31,15 +31,9 @@ export const metadata = {
     })
 };
 
-const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-inter'
-});
-
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.variable}>
+    <html lang="en" className={GeistSans.variable}>
       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <Navbar />
         <Suspense>

diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
@@ -6,11 +6,7 @@ import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
-import {
-  // @ts-ignore
-  experimental_useFormState as useFormState,
-  experimental_useFormStatus as useFormStatus
-} from 'react-dom';
+import { useFormState, useFormStatus } from 'react-dom';
 
 function SubmitButton({
   availableForSale,

diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
@@ -5,11 +5,7 @@ import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import {
-  // @ts-ignore
-  experimental_useFormState as useFormState,
-  experimental_useFormStatus as useFormStatus
-} from 'react-dom';
+import { useFormState, useFormStatus } from 'react-dom';
 
 function SubmitButton() {
   const { pending } = useFormStatus();

diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
@@ -5,11 +5,7 @@ import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
-import {
-  // @ts-ignore
-  experimental_useFormState as useFormState,
-  experimental_useFormStatus as useFormStatus
-} from 'react-dom';
+import { useFormState, useFormStatus } from 'react-dom';
 
 function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
   const { pending } = useFormStatus();

diff --git a/components/opengraph-image.tsx b/components/opengraph-image.tsx
@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server';
+import { ImageResponse } from 'next/og';
 import LogoIcon from './icons/logo';
 
 export type Props = {

diff --git a/next.config.js b/next.config.js
@@ -4,9 +4,6 @@ module.exports = {
     // Disabling on production builds because we're running checks on PRs via GitHub Actions.
     ignoreDuringBuilds: true
   },
-  experimental: {
-    serverActions: true
-  },
   images: {
     formats: ['image/avif', 'image/webp'],
     remotePatterns: [

diff --git a/package.json b/package.json
@@ -25,27 +25,28 @@
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "clsx": "^2.0.0",
-    "next": "13.5.4",
+    "geist": "^1.0.0",
+    "next": "14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.8.4",
-    "@types/react": "18.2.10",
-    "@types/react-dom": "18.2.10",
+    "@types/node": "20.8.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@vercel/git-hooks": "^1.0.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
-    "eslint-config-next": "^13.5.4",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^14.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-unicorn": "^48.0.1",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.0.2",
     "postcss": "^8.4.31",
     "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.5",
-    "tailwindcss": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "tailwindcss": "^3.3.5",
     "typescript": "5.2.2"
   }
 }