Upgrade to Next.js 14 (#1224)

This commit is contained in:
Lee Robinson 2023-10-27 14:11:18 -05:00 committed by GitHub
parent 80e48001d9
commit 2448f5201c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 407 additions and 393 deletions

View File

@ -27,6 +27,6 @@ jobs:
key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }} key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
- name: Install dependencies - name: Install dependencies
if: steps.node-modules-cache.outputs.cache-hit != 'true' if: steps.node-modules-cache.outputs.cache-hit != 'true'
run: pnpm install run: pnpm install --no-frozen-lockfile
- name: Run tests - name: Run tests
run: pnpm test run: pnpm test

View File

@ -1,6 +1,6 @@
import Navbar from 'components/layout/navbar'; import Navbar from 'components/layout/navbar';
import { GeistSans } from 'geist/font';
import { ensureStartsWith } from 'lib/utils'; import { ensureStartsWith } from 'lib/utils';
import { Inter } from 'next/font/google';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
import './globals.css'; 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 }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( 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"> <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 /> <Navbar />
<Suspense> <Suspense>

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
import { ImageResponse } from 'next/server'; import { ImageResponse } from 'next/og';
import LogoIcon from './icons/logo'; import LogoIcon from './icons/logo';
export type Props = { export type Props = {

View File

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

View File

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

744
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['var(--font-inter)'] sans: ['var(--font-geist-sans)']
}, },
keyframes: { keyframes: {
fadeIn: { fadeIn: {