deps: migrate to next 15

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/next.config.js

@@ -95,10 +95,7 @@ const rawNextConfig = {
     ])
   },
   output: 'standalone',
-  swcMinify: true,
-  experimental: {
-    outputFileTracingRoot: path.join(__dirname, '../')
-  },
+  outputFileTracingRoot: path.join(__dirname, '../'),
   productionBrowserSourceMaps: true
 }
 const completeNextConfig = withBundleAnalyzer(rawNextConfig)

frontend/package.json

@@ -92,14 +92,14 @@
     "markdown-it-sub": "2.0.0",
     "markdown-it-sup": "2.0.0",
     "mermaid": "11.4.1",
-    "next": "14.2.26",
+    "next": "15.3.1",
     "picocolors": "1.1.1",
-    "react": "18.3.1",
+    "react": "19.1.0",
     "react-bootstrap": "2.10.9",
     "react-bootstrap-icons": "1.11.5",
     "react-bootstrap-typeahead": "6.3.4",
     "react-diff-viewer": "3.1.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.0",
     "react-i18next": "15.1.4",
     "react-redux": "9.1.2",
     "react-use": "17.5.1",
@@ -119,7 +119,7 @@
     "yjs": "13.6.23"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "14.2.23",
+    "@next/bundle-analyzer": "15.3.1",
     "@testing-library/cypress": "10.0.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -136,8 +136,8 @@
     "@types/markdown-it-container": "2.0.9",
     "@types/markdown-it-plantuml": "1.4.4",
     "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "@types/ws": "8.5.12",
     "@typescript-eslint/eslint-plugin": "8.14.0",
     "@typescript-eslint/parser": "8.14.0",
@@ -147,7 +147,7 @@
     "cypress-fill-command": "1.0.2",
     "dotenv-cli": "7.4.4",
     "eslint": "8.57.1",
-    "eslint-config-next": "14.2.23",
+    "eslint-config-next": "15.3.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-chai-friendly": "1.0.1",
     "eslint-plugin-cypress": "4.1.0",
@@ -166,5 +166,9 @@
     "typescript": "5.6.3",
     "user-agent-data-types": "0.4.2"
   },
-  "packageManager": "yarn@4.5.3"
+  "packageManager": "yarn@4.5.3",
+  "resolutions": {
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2"
+  }
 }

frontend/src/app/(editor)/[id]/page.tsx

@@ -9,13 +9,14 @@ import { baseUrlFromEnvExtractor } from '../../../utils/base-url-from-env-extrac
 import { notFound } from 'next/navigation'
 
 interface PageProps {
-  params: { id: string | undefined }
+  params: Promise<{ id: string | undefined }>
 }
 
 /**
  * Redirects the user to the editor if the link is a root level direct link to a version 1 note.
  */
-const DirectLinkFallback = async ({ params }: PageProps) => {
+const DirectLinkFallback = async (props: PageProps) => {
+  const params = await props.params
   const baseUrl = baseUrlFromEnvExtractor.extractBaseUrls().editor
 
   if (params.id === undefined) {

frontend/src/app/(editor)/n/[noteId]/page.tsx

@@ -9,16 +9,17 @@ import { NoteLoadingBoundary } from '../../../../components/common/note-loading-
 import { EditorPageContent } from '../../../../components/editor-page/editor-page-content'
 import { EditorToRendererCommunicatorContextProvider } from '../../../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import type { NextPage } from 'next'
-import React from 'react'
+import React, { use } from 'react'
 
 interface PageParams {
-  params: NoteIdProps
+  params: Promise<NoteIdProps>
 }
 
 /**
  * Renders a page that is used by the user to edit markdown notes. It contains the editor and a renderer.
  */
-const EditorPage: NextPage<PageParams> = ({ params }) => {
+const EditorPage: NextPage<PageParams> = (props) => {
+  const params = use(props.params)
   return (
     <NoteLoadingBoundary noteId={params.noteId}>
       <EditorToRendererCommunicatorContextProvider>

frontend/src/app/(editor)/p/[noteId]/page.tsx

@@ -11,16 +11,17 @@ import { useNoteAndAppTitle } from '../../../../components/editor-page/head-meta
 import { EditorToRendererCommunicatorContextProvider } from '../../../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import { SlideShowPageContent } from '../../../../components/slide-show-page/slide-show-page-content'
 import type { NextPage } from 'next'
-import React from 'react'
+import React, { use } from 'react'
 
 interface PageParams {
-  params: NoteIdProps
+  params: Promise<NoteIdProps>
 }
 
 /**
  * Renders a page that is used by the user to hold a presentation. It contains the renderer for the presentation.
  */
-const SlideShowPage: NextPage<PageParams> = ({ params }) => {
+const SlideShowPage: NextPage<PageParams> = (props) => {
+  const params = use(props.params)
   useNoteAndAppTitle()
 
   return (

frontend/src/app/(editor)/s/[noteId]/page.tsx

@@ -10,16 +10,17 @@ import { DocumentReadOnlyPageContent } from '../../../../components/document-rea
 import { useNoteAndAppTitle } from '../../../../components/editor-page/head-meta-properties/use-note-and-app-title'
 import { EditorToRendererCommunicatorContextProvider } from '../../../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import type { NextPage } from 'next'
-import React from 'react'
+import React, { use } from 'react'
 
 interface PageParams {
-  params: NoteIdProps
+  params: Promise<NoteIdProps>
 }
 
 /**
  * Renders a page that contains only the rendered document without an editor or realtime updates.
  */
-const DocumentReadOnlyPage: NextPage<PageParams> = ({ params }) => {
+const DocumentReadOnlyPage: NextPage<PageParams> = (props) => {
+  const params = use(props.params)
   useNoteAndAppTitle()
 
   return (

frontend/src/components/application-loader/loading-screen/animations.module.scss

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-@import "keyframes";
+@use "keyframes";
 
 .rows {
   transition: opacity 0.2s;

frontend/src/components/common/application-error-alert/style.module.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 /*!
  * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
@@ -7,9 +8,9 @@
 .alert {
   $color: #5A0F04;
   display: flex;
-  --bs-alert-color: #{lighten($color, 80%)};
+  --bs-alert-color: #{color.adjust($color, $lightness: 80%)};
   --bs-alert-bg: #{$color};
-  --bs-alert-border-color: #{lighten($color, 20%)};
+  --bs-alert-border-color: #{color.adjust($color, $lightness: 20%)};
   flex-direction: row;
 }
 

frontend/src/components/layout/expected-origin-boundary.tsx

@@ -4,11 +4,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { headers } from 'next/headers'
-import type { PropsWithChildren } from 'react'
+import type { AwaitedReactNode } from 'react'
 import React from 'react'
 
-export interface ExpectedOriginBoundaryProps extends PropsWithChildren {
+export interface ExpectedOriginBoundaryProps {
   expectedOrigin: string
+  children?: AwaitedReactNode | undefined
 }
 
 /**
@@ -16,8 +17,8 @@ export interface ExpectedOriginBoundaryProps extends PropsWithChildren {
  *
  * @return the calculated request origin or {@code undefined} if no host header has been found
  */
-export const buildOriginFromHeaders = (): string | undefined => {
-  const currentHeader = headers()
+export const buildOriginFromHeaders = async (): Promise<string | undefined> => {
+  const currentHeader = await headers()
   const host = currentHeader.get('x-forwarded-host') ?? currentHeader.get('host')
   if (host === null) {
     return undefined
@@ -34,8 +35,11 @@ export const buildOriginFromHeaders = (): string | undefined => {
  * @param children the children to show if the origin passes
  * @param expectedOrigin The origin that should match the request's origin
  */
-export const ExpectedOriginBoundary: React.FC<ExpectedOriginBoundaryProps> = ({ children, expectedOrigin }) => {
-  const currentOrigin = buildOriginFromHeaders()
+export async function ExpectedOriginBoundary({
+  children,
+  expectedOrigin
+}: ExpectedOriginBoundaryProps): Promise<React.AwaitedReactNode> {
+  const currentOrigin = await buildOriginFromHeaders()
 
   if (new URL(expectedOrigin).origin !== currentOrigin) {
     return (

frontend/src/components/login-page/one-click/one-click-login-button.module.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 /*!
  * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
@@ -5,7 +6,7 @@
  */
 
 @function brightness($color) {
-  @return ((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000;
+  @return ((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114)) / 1000;
 }
 
 @mixin button($color) {
@@ -13,7 +14,7 @@
   color: $font-color;
   background-color: $color;
   &:hover {
-    background-color: darken($color, 15%);
+    background-color: color.adjust($color, $lightness: -15%);
   }
 }
 

frontend/src/components/markdown-renderer/hooks/use-calculate-line-marker-positions.ts

@@ -55,13 +55,13 @@ const calculateLineMarkerPositions = (
  */
 export const useCalculateLineMarkerPosition = (
   documentElement: RefObject<HTMLDivElement>,
-  lineMarkers: LineMarkers[] | undefined,
+  lineMarkers: LineMarkers[],
   onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
 ): void => {
   const lastLineMarkerPositions = useRef<LineMarkerPosition[]>()
 
   const calculateNewLineMarkerPositions = useCallback(() => {
-    if (!documentElement.current || !onLineMarkerPositionChanged || !lineMarkers) {
+    if (!documentElement.current || !onLineMarkerPositionChanged) {
       return
     }
 

frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx

@@ -62,7 +62,7 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
   )
 
   const markdownBodyRef = useRef<HTMLDivElement>(null)
-  const currentLineMarkers = useRef<LineMarkers[]>()
+  const currentLineMarkers = useRef<LineMarkers[]>([])
 
   const extensions = useMarkdownExtensions(
     baseUrl,