Upgrade Next.js and Storybook.js

.storybook/main.js

@@ -7,10 +7,8 @@ module.exports = {
   ],
 
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@chromatic-com/storybook"
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs"
   ],
 
   framework: {

.storybook/preview.js

@@ -9,8 +9,14 @@ export const parameters = {
     },
   },
   viewport: {
-    viewports: DEFAULT_VIEWPORTS,
-    defaultViewport: "medium",
+    options: DEFAULT_VIEWPORTS
   },
   chromatic: { viewports: [320, 640, 768, 1024, 1200] },
 };
+
+export const initialGlobals = {
+  viewport: {
+    value: "medium",
+    isRotated: false
+  }
+};

components/announcements/Announcements.stories.tsx

@@ -1,5 +1,5 @@
 import { AnnouncementsBlock } from "#/components/announcements/AnnouncementsBlock";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Announcements } from "#/components/announcements/Announcements";
 import { Announcement } from "#/content/announcements";
 

components/elements/Elements.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 
 const meta: Meta = {
   title: "Elements",

components/markdown/Markdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import RichTextComponent from "#/components/markdown/Markdown";
 
 const meta: Meta = {

components/markdown/Markdown.tsx

@@ -45,7 +45,7 @@ export default function Markdown({ content }: Props): JSX.Element | null {
             ),
             img: (props) => (
               <span className="w-full flex flex-col items-center py-2 gap-1">
-                <Image alt={props.alt ?? ""} src={props.src ?? ""} width={1280} height={768} unoptimized={true} />
+                <Image alt={props.alt ?? ""} src={`${props.src}`} width={1280} height={768} unoptimized={true} />
                 {props.alt && (
                   <span className="w-full flex flex-row justify-center text-sm text-gray-700">{props.alt}</span>
                 )}

components/match/SoccerMatch.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { SoccerMatchReport } from "#/components/match/SoccerMatchReport";
 
 const meta: Meta<typeof SoccerMatchReport> = {

components/sponsor/Sponsor.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Sponsor } from "#/components/sponsor/Sponsor";
 import { sponsors } from "#/content/sponsor";
 

components/sponsor/SponsorGrid.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Sponsor } from "#/components/sponsor/Sponsor";
 import SponsorGrid from "#/components/sponsor/SponsorGrid";
 

components/web/person/PersonCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { getPersonByTag } from "#/content/people";
 import { PersonCard } from "#/components/web/person/PersonCard";
 

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     minimumCacheTTL: 2678400, // 31 days
+    qualities: [75, 85],
     remotePatterns: [
       {
         protocol: "http",
@@ -17,13 +18,15 @@ const nextConfig = {
       },
     ],
   },
+  /*
   webpack: (config) => {
     config.module.rules.push({
       test: /\.node/,
       use: "raw-loader",
     });
     return config;
   },
+  */
   async redirects() {
     return [
       {

package.json

@@ -9,7 +9,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "db:migrate": "drizzle-kit migrate",
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "dev:storybook": "storybook dev -p 6006",
     "prebuild": "pnpm run db:migrate",
     "build": "next build",
@@ -28,20 +28,20 @@
     "@fontsource/roboto": "^5.1.1",
     "@mui/material": "^6.4.3",
     "@neondatabase/serverless": "^0.10.4",
-    "@next/mdx": "15.1.6",
+    "@next/mdx": "16.1.0",
     "@tanstack/react-table": "^8.20.6",
     "@tanstack/table-core": "^8.20.5",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "drizzle-orm": "^0.39.2",
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
-    "next": "15.4.8",
+    "next": "16.1.0",
     "next-sitemap": "^4.2.3",
     "node-fetch": "2.7.0",
-    "nodemailer": "^6.10.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "nodemailer": "7.0.11",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-hotkeys-hook": "^4.6.1",
     "react-icons": "^5.0.1",
     "react-markdown": "^9.0.3",
@@ -50,14 +50,11 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/nextjs": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/nextjs": "^10.1.10",
+    "@storybook/react": "^10.1.10",
     "@tailwindcss/postcss": "^4.1.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -67,22 +64,22 @@
     "@types/node": "^22.15.21",
     "@types/node-fetch": "^2.6.12",
     "@types/nodemailer": "^6.4.17",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "@vitest/ui": "^3.1.4",
-    "chromatic": "^12.0.0",
+    "chromatic": "^13.3.4",
     "drizzle-kit": "^0.31.1",
     "eslint": "^9.27.0",
-    "eslint-config-next": "15.3.2",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-config-next": "16.1.0",
+    "eslint-plugin-storybook": "^10.1.10",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.2",
     "prettier": "^3.5.1",
     "raw-loader": "^4.0.2",
-    "storybook": "^8.6.14",
+    "storybook": "^10.1.10",
     "tailwindcss": "^4.1.7",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.8.3",
@@ -91,8 +88,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "19.0.10",
-      "@types/react-dom": "19.0.4"
+      "@types/react": "19.2.7",
+      "@types/react-dom": "19.2.3"
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"