chore: upgrade to nextjs v15

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "prettier.configPath": ".prettierrc.json",
-  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always"
+  }
 }

package.json

@@ -15,19 +15,19 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@next/env": "14.2.15",
+    "@next/env": "15.0.0",
     "@sindresorhus/slugify": "2.2.1",
     "@types/node": "22.7.8",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected].1",
     "@vercel/analytics": "1.3.1",
-    "eslint": "8.57.0",
-    "next": "14.2.15",
+    "eslint": "9.13.0",
+    "next": "15.0.0",
     "next-mdx-remote": "5.0.0",
     "next-themes": "0.3.0",
     "plaiceholder": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-45804af1-20241021",
+    "react-dom": "19.0.0-rc-45804af1-20241021",
     "react-focus-lock": "2.13.2",
     "react-icons": "5.3.0",
     "rehype-img-size": "1.0.1",
@@ -48,7 +48,7 @@
     "@typescript-eslint/parser": "8.11.0",
     "@vitejs/plugin-react": "4.3.3",
     "autoprefixer": "10.4.20",
-    "eslint-config-next": "14.2.15",
+    "eslint-config-next": "15.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-react-hooks": "5.0.0",
@@ -60,5 +60,25 @@
     "tailwindcss": "3.4.14",
     "vite": "5.4.9",
     "vitest": "2.1.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:[email protected]",
+      "@types/react-dom": "npm:[email protected]"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "19.0.0-rc.1",
+        "react-dom": "19.0.0-rc.1"
+      },
+      "allowAny": [
+        "@types/react",
+        "@types/react-dom"
+      ]
+    }
+  },
+  "engines": {
+    "node": "^18.0.0 || ^20.11.1 || ^22.0.0",
+    "pnpm": "^9.0.0"
   }
 }

src/app/blog/(archives)/kategoria/[slug]/page.tsx

@@ -11,10 +11,11 @@ import type { Metadata } from "next";
 import { getMetadata } from "@/utils/getMetadata";
 
 export async function generateMetadata({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const { slug } = await params;
   const { category } = await getPostsByCategory(slug);
   return getMetadata({
     article: false,
@@ -30,10 +31,11 @@ export function generateStaticParams() {
 }
 
 export default async function TagArchive({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
+  const { slug } = await params;
   const { posts, category } = await getPostsByCategory(slug);
   const categories = await getCategories();
 

src/app/blog/(archives)/tag/[slug]/page.tsx

@@ -5,10 +5,11 @@ import { getMetadata } from "@/utils/getMetadata";
 import { Heading } from "@/components/atoms/Heading/Heading";
 
 export async function generateMetadata({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const { slug } = await params;
   const { tag } = await getPostsByTag(slug);
   return getMetadata({
     article: false,
@@ -24,10 +25,11 @@ export function generateStaticParams() {
 }
 
 export default async function TagArchive({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
+  const { slug } = await params;
   const { posts, tag } = await getPostsByTag(slug);
 
   return (

src/app/blog/(single)/[slug]/page.tsx

@@ -7,10 +7,11 @@ import type { Metadata } from "next";
 import type { Article, WithContext } from "schema-dts";
 
 export async function generateMetadata({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const { slug } = await params;
   const post = await getPostBySlug(slug);
 
   return getMetadata({
@@ -34,10 +35,11 @@ export function generateStaticParams() {
 }
 
 export default async function BlogPost({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
+  const { slug } = await params;
   const post = await getPostBySlug(slug);
   const relatedPosts = await getRelatedPosts(
     slug,

src/components/atoms/Container/Container.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 type ContainerProps = JSX.IntrinsicElements["div"] & {
   as?: "div" | "article";
 };

src/components/molecules/MdxHeading/MdxHeading.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { getSlug } from "@/utils/getSlug";
+import type { JSX } from "react";
 
 type MdxHeadingProps = {
   as: "h1" | "h2" | "h3" | "h4" | "h5";

src/hooks/useOnClickOutside.ts

@@ -2,13 +2,15 @@ import type { RefObject } from "react";
 import { useEffect } from "react";
 
 export const useOnClickOutside = (
-  ref: RefObject<Node>,
+  ref: RefObject<HTMLElement | null>,
   action: (event: MouseEvent) => void,
 ): void => {
   useEffect(() => {
     const handleAction = (event: MouseEvent) => {
-      if (event.target instanceof Node) {
-        if (!ref.current || ref.current.contains(event.target)) return;
+      if (event.target instanceof HTMLElement) {
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
         action(event);
       }
     };

src/hooks/useStickyElement.ts

@@ -3,10 +3,10 @@ import { useEffect, useCallback, useRef, useState } from "react";
 
 export const useStickyElement = (
   customOffset?: number,
-): [boolean, RefObject<HTMLElement>] => {
+): [boolean, RefObject<HTMLElement | null>] => {
   const [isSticky, setStickiness] = useState(false);
   const [positionOnWhichStickinessIsApplied, setPosition] = useState(0);
-  const elementToApplyStickiness = useRef<HTMLElement>(null);
+  const elementToApplyStickiness = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
     if (customOffset) {

src/lib/mdxCustomComponents.tsx

@@ -3,6 +3,7 @@ import type { ImageProps } from "next/image";
 import Link from "next/link";
 import { MdxHeading } from "@/components/molecules/MdxHeading/MdxHeading";
 import Image from "next/image";
+import type { JSX } from "react";
 
 export const mdxCustomComponents = {
   a: Link,