Merge pull request #214 from r00tat/enhancement/nextjs-15

Upgrade nextjs to version 15

Dockerfile

@@ -6,14 +6,14 @@ FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json package-lock.json ./
-RUN npm ci
+RUN npm ci --force
 
 # Rebuild the source code only when needed
 FROM deps AS builder
 WORKDIR /app
 COPY . .
 # COPY --from=deps /app/node_modules ./node_modules
-RUN npm run build && npm ci --omit=dev --ignore-scripts --prefer-offline
+RUN npm run build && npm ci --omit=dev --ignore-scripts --prefer-offline --force
 
 # Production image, copy all the files and run next
 FROM base AS runner

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // 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.

package.json

@@ -3,7 +3,7 @@
   "description": "Hydrantenkarte der Feuerwehr Neusiedl am See",
   "license": "MPL-2.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -26,7 +26,7 @@
     "@mui/material": "^6.1.1",
     "@mui/x-data-grid": "^7.23.2",
     "@mui/x-date-pickers": "^7.23.2",
-    "@react-leaflet/core": "^2.1.0",
+    "@react-leaflet/core": "^3.0.0",
     "@serwist/next": "^9.0.11",
     "@turf/bbox-polygon": "^7.1.0",
     "@turf/boolean-within": "^7.1.0",
@@ -50,14 +50,14 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
     "mui-color-input": "^5.0.1",
-    "next": "^14.2.15",
+    "next": "15.1.0",
     "next-auth": "^5.0.0-beta.25",
     "proj4": "^2.15.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-firebase-hooks": "^5.1.1",
     "react-google-one-tap-login": "^0.1.1",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
     "sharp": "^0.33.5",
     "uuid": "^11.0.3"
   },
@@ -66,12 +66,15 @@
     "@types/leaflet": "^1.9.15",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.12",
+    "@types/react": "19.0.1",
     "@types/uuid": "^10.0.0",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^15.1.0",
+    "eslint-config-next": "15.1.0",
     "serwist": "^9.0.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2"
+  },
+  "overrides": {
+    "@types/react": "19.0.1"
   }
 }

src/app/admin/page.tsx

@@ -42,23 +42,23 @@ export default function AdminPage() {
     <Box margin={2}>
       <Typography variant="h3">Admin Actions</Typography>
       <Typography>{status}</Typography>
-      <Typography>
-        Set authorized from on to true{' '}
+      <Typography margin={2}>
         <Button onClick={updateAuthorized} variant="contained">
           Fix users authorized
-        </Button>
+        </Button>{' '}
+        Set authorized from on to true
       </Typography>
-      <Typography>
-        Set ffnd as default group on firecalls{' '}
+      <Typography margin={2}>
         <Button onClick={setFirecallGroup} variant="contained">
           Fix empty firecall group
-        </Button>
+        </Button>{' '}
+        Set ffnd as default group on firecalls
       </Typography>
-      <Typography>
-        Set claims for users{' '}
+      <Typography margin={2}>
         <Button onClick={setCustomClaimsForAllUsersCb} variant="contained">
           Set custom claims
-        </Button>
+        </Button>{' '}
+        Set claims for users
       </Typography>
     </Box>
   );

src/app/api/users/[uid]/messaging/route.ts

@@ -38,10 +38,13 @@ async function handleRegister(uid: string, token: string) {
   return { ...oldData, ...newData };
 }
 
-export async function POST(
-  req: NextRequest,
-  { params: { uid } }: { params: { uid: string } }
-) {
+export async function POST(req: NextRequest, props: { params: Promise<{ uid: string }> }) {
+  const params = await props.params;
+
+  const {
+    uid
+  } = params;
+
   try {
     const authData = await userRequired(req);
 
@@ -93,11 +96,13 @@ async function handleUnRegister(uid: string, token: string) {
   return { ...oldData, ...newData };
 }
 
-export async function DELETE(
-  req: NextRequest,
-  // res: NextApiResponse<UsersResponse>
-  { params: { uid } }: { params: { uid: string } }
-) {
+export async function DELETE(req: NextRequest, props: { params: Promise<{ uid: string }> }) {
+  const params = await props.params;
+
+  const {
+    uid
+  } = params;
+
   try {
     const authData = await userRequired(req);
 

src/app/api/users/[uid]/route.ts

@@ -7,10 +7,13 @@ export interface UsersResponse {
   user: UserRecordExtended;
 }
 
-export async function POST(
-  req: NextRequest,
-  { params: { uid } }: { params: { uid: string } }
-) {
+export async function POST(req: NextRequest, props: { params: Promise<{ uid: string }> }) {
+  const params = await props.params;
+
+  const {
+    uid
+  } = params;
+
   try {
     await adminRequired(req);
     const user: UserRecordExtended = await req.json();

src/app/firebaseAuth.ts

@@ -1,5 +1,5 @@
 'use server';
-import { isRedirectError } from 'next/dist/client/components/redirect';
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
 import { ApiException } from './api/errors';
 import { auth, signIn, signOut } from './auth';
 

src/components/FirecallItems/elements/FirecallItemBase.tsx

@@ -9,7 +9,10 @@ import { SimpleMap } from '../../../common/types';
 import { defaultPosition } from '../../../hooks/constants';
 import { FirecallItem } from '../../firebase/firestore';
 import { leafletIcons } from '../icons';
-import { FirecallItemMarkerDefault } from './marker/FirecallItemDefault';
+import {
+  FirecallItemMarkerDefault,
+  MarkerRenderOptions,
+} from './marker/FirecallItemDefault';
 import L from 'leaflet';
 
 export interface FirecallItemPopupProps {
@@ -214,13 +217,17 @@ export class FirecallItemBase {
     );
   }
 
-  public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  public renderMarker(
+    selectItem: (item: FirecallItem) => void,
+    options: MarkerRenderOptions = {}
+  ): ReactNode {
     try {
       return (
         <FirecallItemMarkerDefault
           record={this}
           selectItem={selectItem}
           key={this.id}
+          options={options}
         />
       );
     } catch (err) {

src/components/FirecallItems/elements/marker/FirecallItemDefault.tsx

@@ -11,9 +11,15 @@ import {
 } from '../../../firebase/firestore';
 import { FirecallItemBase } from '../FirecallItemBase';
 
+export interface MarkerRenderOptions {
+  /* do not show the popup */
+  hidePopup?: boolean;
+}
+
 export interface FirecallItemMarkerProps {
   record: FirecallItemBase;
   selectItem: (item: FirecallItem) => void;
+  options?: MarkerRenderOptions;
 }
 
 async function updateFircallItemPos(
@@ -42,6 +48,7 @@ async function updateFircallItemPos(
 export function FirecallItemMarkerDefault({
   record,
   selectItem,
+  options: { hidePopup } = {},
 }: FirecallItemMarkerProps) {
   const icon = record.icon();
   const firecallId = useFirecallId();
@@ -81,7 +88,7 @@ export function FirecallItemMarkerDefault({
         }
         rotationOrigin="center"
       >
-        {record.renderPopup(selectItem)}
+        {!hidePopup && record.renderPopup(selectItem)}
       </RotatedMarker>
     </>
   );

src/components/Map/MapActionButtons.tsx

@@ -137,7 +137,9 @@ export default function MapActionButtons({ map }: MapActionButtonsOptions) {
 
       {fzgDrawing && (
         <React.Fragment>
-          {getItemInstance(fzgDrawing).renderMarker(() => {})}
+          {getItemInstance(fzgDrawing).renderMarker(() => {}, {
+            hidePopup: true,
+          })}
         </React.Fragment>
       )}
     </>

src/components/Map/markers/RotatedMarker.tsx

@@ -7,7 +7,7 @@ export interface RotatedMarkerProps extends MarkerProps {
 }
 export const RotatedMarker = forwardRef<L.Marker, RotatedMarkerProps>(
   ({ children, rotationAngle, rotationOrigin, ...props }, forwardRef) => {
-    const markerRef = useRef<L.Marker>();
+    const markerRef = useRef<L.Marker>(undefined);
 
     useEffect(() => {
       const marker = markerRef.current;

src/hooks/useDebounce.ts

@@ -2,7 +2,7 @@ import debounce from 'lodash.debounce';
 import { useEffect, useMemo, useRef } from 'react';
 
 const useDebounce = (callback: () => void, time = 500) => {
-  const ref = useRef<() => void>();
+  const ref = useRef<() => void>(undefined);
 
   useEffect(() => {
     ref.current = callback;