Update Next.js to v15, overhaul ESLint, minor reformat, misc

.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "plugins": ["@typescript-eslint"],
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  "rules": {
-    "@typescript-eslint/consistent-type-imports": "warn"
-  }
-}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["plaiceholder"]
+}

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.mjs

@@ -50,7 +50,6 @@ const v2_redirects = [
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
-  swcMinify: true,
   i18n: {
     locales: ["en"],
     defaultLocale: "en",

package.json

@@ -12,6 +12,7 @@
     "@directus/sdk": "^18.0.3",
     "@headlessui/react": "^1.7.7",
     "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
+    "@next/eslint-plugin-next": "^15.1.1",
     "@tailwindcss/typography": "^0.5.8",
     "@tanstack/react-query": "^4.16.0",
     "@tippyjs/react": "^4.2.6",
@@ -20,7 +21,7 @@
     "@trpc/react-query": "^10.0.0",
     "@trpc/server": "^10.0.0",
     "@vercel/analytics": "^0.1.6",
-    "next": "13.0.2",
+    "next": "^15.1.1",
     "plaiceholder": "^2.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -32,22 +33,20 @@
     "sharp": "^0.32.1",
     "superjson": "1.9.1",
     "usehooks-ts": "^2.9.1",
-    "zod": "^3.18.0"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/node": "^18.0.0",
+    "typescript": "^5",
-    "@types/react": "^18.0.14",
+    "@types/node": "^20",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@types/react-dom": "^19",
-    "@typescript-eslint/parser": "^5.33.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.1",
+    "@eslint/eslintrc": "^3",
     "autoprefixer": "^10.4.7",
-    "eslint": "^8.26.0",
+    "prettier-plugin-tailwindcss": "^0.1.13"
-    "eslint-config-next": "13.0.2",
-    "postcss": "^8.4.14",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.0",
-    "typescript": "^4.8.4"
   },
   "ct3aMetadata": {
     "initVersion": "6.11.3"

src/pages/index.tsx

@@ -1,15 +1,15 @@
+import { readItems } from "@directus/sdk";
 import { type NextPage } from "next";
 import Head from "next/head";
-import React, { useEffect } from "react";
-import ItemCard from "../components/ItemCard";
-import { getPlaiceholder } from "plaiceholder";
-import { useBreakpointValue } from "../utils/helpers";
-import type { Project } from "../utils/types";
 import Link from "next/link";
+import { getPlaiceholder } from "plaiceholder";
+import { useEffect } from "react";
 import Balancer from "react-wrap-balancer";
 import AppWrapper from "../components/AppWrapper";
+import ItemCard from "../components/ItemCard";
 import directus from "../utils/directus";
-import { readItems } from "@directus/sdk";
+import { useBreakpointValue } from "../utils/helpers";
+import type { Project } from "../utils/types";
 
 type ProjectWithBlur = Project & { bannerBlur: string };
 
@@ -94,7 +94,7 @@ export async function getStaticProps() {
 
   return {
     props: {
-      tagline: metadata.tagline,
+      tagline: metadata[0]!.tagline,
       projects: await Promise.all(
         projects.map(async (project) => {
           const { base64 } = await getPlaiceholder(project.banner, {
@@ -126,9 +126,8 @@ const Home: NextPage<HomeStaticProps> = ({
 
   // use-tailwind-breakpoint
   useEffect(() => {
-    typeof window !== "undefined"
+    if (typeof window !== "undefined")
-      ? window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event("resize"));
-      : null;
   }, []);
 
   return (

src/server/trpc/context.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { type inferAsyncReturnType } from "@trpc/server";
 import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
 

src/utils/directus.ts

@@ -1,12 +1,12 @@
 import { createDirectus, rest } from "@directus/sdk";
 
-export type Schema = {
+export interface Schema {
   metadata: Metadata[];
-};
+}
 
-export type Metadata = {
+export interface Metadata {
   tagline: string;
-};
+}
 
 const directus = createDirectus<Schema>("https://api.xevion.dev").with(rest());
 

src/utils/helpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import create from "@kodingdotninja/use-tailwind-breakpoint";
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "./../../tailwind.config.cjs";
@@ -8,18 +9,20 @@ export function classNames(...classes: (string | null | undefined)[]) {
 
 const isClient = (): boolean => {
   return typeof window !== "undefined";
-}
+};
 
 const isServer = (): boolean => {
   return !isClient();
-}
+};
 
-const hoverableQuery: MediaQueryList | null = isClient() ? window.matchMedia('(hover: hover) and (pointer: fine)') : null;
+const hoverableQuery: MediaQueryList | null = isClient()
+  ? window.matchMedia("(hover: hover) and (pointer: fine)")
+  : null;
 
 export function isHoverable() {
   return hoverableQuery?.matches;
 }
 
-
 const config = resolveConfig(tailwindConfig);
-export const {useBreakpoint, useBreakpointValue, useBreakpointEffect} = create(config.theme!.screens);
+export const { useBreakpoint, useBreakpointValue, useBreakpointEffect } =
+  create(config.theme!.screens);