feat!: update to next 15

apps/cms/package.json

@@ -45,10 +45,10 @@
     "@types/express-fileupload": "^1.5.1",
     "@types/lodash": "^4.17.12",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "catalog:",
+    "@types/react": "catalog:react18",
     "copyfiles": "^2.4.1",
     "eslint": "catalog:",
-    "react": "catalog:",
+    "react": "catalog:react18",
     "react-email": "3.0.1",
     "tsx": "^4.19.1",
     "typescript": "catalog:",

apps/cms/src/emails/helper-components.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-bitwise -- lexical nodes are defined bitwise*/
+import type { JSX } from "react";
 import { type NewsItem } from "@tietokilta/cms-types/payload";
 import { type EditorState, type Node } from "@tietokilta/cms-types/lexical";
 import { Link } from "@react-email/components";

apps/cms/src/emails/utils/utils.ts

@@ -1,4 +1,5 @@
 import type { Node } from "@tietokilta/cms-types/lexical";
+import type { JSX } from "react";
 
 export type Locale = (typeof locales)[number];
 

apps/web/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "next build",
     "clean": "rm -rf .next",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "lint": "eslint  \"./src/**/*.{js,ts,jsx,tsx}\"",
     "start": "next start",
     "typecheck": "tsc --noEmit"
@@ -18,15 +18,15 @@
     "clsx": "catalog:",
     "date-fns": "^4.1.0",
     "lodash": "^4.17.21",
-    "next": "^14.2.15",
+    "next": "^15.0.1",
     "next-international": "^1.2.4",
     "nextjs-toploader": "^3.7.15",
     "payload-admin-bar": "^1.0.6",
     "postcss": "catalog:",
     "qs": "^6.13.0",
-    "react": "catalog:",
+    "react": "catalog:react19",
     "react-big-calendar": "^1.15.0",
-    "react-dom": "catalog:",
+    "react-dom": "catalog:react19",
     "react-markdown": "^9.0.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
@@ -40,17 +40,17 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.15",
+    "@next/eslint-plugin-next": "15.0.1",
     "@tailwindcss/typography": "catalog:",
     "@tietokilta/cms-types": "workspace:*",
     "@tietokilta/config-typescript": "workspace:*",
     "@tietokilta/eslint-config": "workspace:*",
     "@types/lodash": "^4.17.12",
     "@types/node": "catalog:",
     "@types/qs": "^6.9.16",
-    "@types/react": "catalog:",
+    "@types/react": "catalog:react19",
     "@types/react-big-calendar": "^1.8.12",
-    "@types/react-dom": "catalog:",
+    "@types/react-dom": "catalog:react19",
     "eslint": "catalog:",
     "react-dvd-screensaver": "^0.1.1",
     "typescript": "catalog:",

apps/web/src/app/[locale]/[...path]/page.tsx

@@ -15,7 +15,7 @@ import WeeklyNewslettersListPage from "../../../custom-pages/weekly-newsletters-
 import { openGraphImage } from "../../shared-metadata";
 
 interface NextPage<Params extends Record<string, unknown>> {
-  params: Params;
+  params: Promise<Params>;
   searchParams: Record<string, string | string[] | undefined>;
 }
 
@@ -70,9 +70,11 @@ const getPage = async (path: string[], locale: Locale) => {
   return page;
 };
 
-export const generateMetadata = async ({
-  params: { path },
-}: Props): Promise<Metadata> => {
+export const generateMetadata = async (props: Props): Promise<Metadata> => {
+  const params = await props.params;
+
+  const { path } = params;
+
   const locale = getCurrentLocale();
   const page = await getPage(path, locale);
 
@@ -98,7 +100,11 @@ function Content({ content }: { content?: EditorState }) {
   );
 }
 
-async function Page({ params: { path } }: Props) {
+async function Page(props: Props) {
+  const params = await props.params;
+
+  const { path } = params;
+
   const locale = getCurrentLocale();
   const page = await getPage(path, locale);
 

apps/web/src/app/[locale]/events/[...ilmomasiinaPath]/page.tsx

@@ -1,9 +1,9 @@
 import { redirect } from "next/navigation";
 
 interface PageProps {
-  params: {
+  params: Promise<{
     ilmomasiinaPath: string[];
-  };
+  }>;
 }
 
 const ilmomasiinaBaseUrl =
@@ -22,7 +22,11 @@ const getReplacement = (key: string) => {
 
 type Key = keyof typeof languageMappings;
 
-export default function Page({ params: { ilmomasiinaPath } }: PageProps) {
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+
+  const { ilmomasiinaPath } = params;
+
   const url = new URL(
     ilmomasiinaPath
       .map((segment) => getReplacement(segment) ?? segment)

apps/web/src/app/[locale]/events/[slug]/page.tsx

@@ -398,14 +398,16 @@ async function SignUpActions({ event }: { event: IlmomasiinaEvent }) {
 }
 
 interface PageProps {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export const generateMetadata = async ({
-  params: { slug },
-}: PageProps): Promise<Metadata> => {
+export const generateMetadata = async (props: PageProps): Promise<Metadata> => {
+  const params = await props.params;
+
+  const { slug } = params;
+
   const event = await fetchEvent(slug);
   if (!event.ok) {
     // eslint-disable-next-line no-console -- nice to know if something goes wrong
@@ -422,7 +424,11 @@ export const generateMetadata = async ({
   };
 };
 
-export default async function Page({ params: { slug } }: PageProps) {
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+
+  const { slug } = params;
+
   const event = await fetchEvent(slug);
   const t = await getScopedI18n("action");
   if (!event.ok && event.error === "ilmomasiina-event-not-found") {

apps/web/src/app/[locale]/events/[slug]/signup-button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Form from "next/form";
 import { Button, type ButtonProps } from "@tietokilta/ui";
 import { useFormStatus } from "react-dom";
 import type { signUp } from "../../../../lib/api/external/ilmomasiina/actions";
@@ -21,11 +22,11 @@ export function SignUpButton({
   signUpAction: typeof signUp;
 }>) {
   return (
-    <form action={signUpAction} className="contents">
+    <Form action={signUpAction} className="contents">
       <input type="hidden" name="quotaId" value={quotaId} />
       <StatusButton type="submit" disabled={isDisabled} variant="secondary">
         {children}
       </StatusButton>
-    </form>
+    </Form>
   );
 }

apps/web/src/app/[locale]/layout.tsx

@@ -19,9 +19,9 @@ const robotoMono = Roboto_Mono({
 });
 
 export interface LayoutProps {
-  params: {
+  params: Promise<{
     locale: Locale;
-  };
+  }>;
 }
 
 const localizedMetadata = {
@@ -60,27 +60,36 @@ const icons = {
 
 const mainUrl = process.env.PUBLIC_FRONTEND_URL ?? "https://tietokilta.fi";
 
-export const generateMetadata = ({
-  params: { locale },
-}: LayoutProps): Metadata => ({
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- extra safety
-  ...(localizedMetadata[locale] || localizedMetadata.fi),
-  metadataBase: new URL(mainUrl),
-  generator: "Next.js",
-  creator: "Tietokilta ry",
-  icons,
-});
+export const generateMetadata = async (
+  props: LayoutProps,
+): Promise<Metadata> => {
+  const { locale } = await props.params;
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- extra safety
+    ...(localizedMetadata[locale] || localizedMetadata.fi),
+
+    metadataBase: new URL(mainUrl),
+    generator: "Next.js",
+    creator: "Tietokilta ry",
+    icons,
+  };
+};
 
 export const viewport: Viewport = {
   themeColor: "black",
 };
 
-export default function RootLayout({
-  children,
-  params: { locale },
-}: {
-  children: React.ReactNode;
-} & LayoutProps) {
+export default async function RootLayout(
+  props: {
+    children: React.ReactNode;
+  } & LayoutProps,
+) {
+  const params = await props.params;
+
+  const { locale } = params;
+
+  const { children } = props;
+
   return (
     <html lang={locale}>
       <body className={cn(inter.variable, robotoMono.variable, "font-sans")}>

apps/web/src/app/[locale]/page.tsx

@@ -26,11 +26,13 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function Home({
-  searchParams: { page },
-}: {
-  searchParams: { page?: string | string[] };
+export default async function Home(props: {
+  searchParams: Promise<{ page?: string | string[] }>;
 }) {
+  const searchParams = await props.searchParams;
+
+  const { page } = searchParams;
+
   const locale = getCurrentLocale();
 
   const landingPageData = await fetchLandingPage(locale)({});

apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx

@@ -9,15 +9,17 @@ import { getScopedI18n } from "../../../../../locales/server";
 import { SignupForm } from "./signup-form";
 
 interface PageProps {
-  params: {
+  params: Promise<{
     signupId: string;
     signupEditToken: string;
-  };
+  }>;
 }
 
-export const generateMetadata = async ({
-  params: { signupId, signupEditToken },
-}: PageProps) => {
+export const generateMetadata = async (props: PageProps) => {
+  const params = await props.params;
+
+  const { signupId, signupEditToken } = params;
+
   const signupInfo = await getSignup(signupId, signupEditToken);
   const t = await getScopedI18n("ilmomasiina.form");
 
@@ -34,9 +36,11 @@ export const generateMetadata = async ({
   };
 };
 
-export default async function Page({
-  params: { signupId, signupEditToken },
-}: PageProps) {
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+
+  const { signupId, signupEditToken } = params;
+
   const signupInfo = await getSignup(signupId, signupEditToken);
 
   if (!signupInfo.ok && signupInfo.error === "ilmomasiina-signup-not-found") {

apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx

@@ -12,8 +12,9 @@ import {
   type ButtonProps,
   buttonVariants,
 } from "@tietokilta/ui";
-import { useFormState, useFormStatus } from "react-dom";
-import { useEffect } from "react";
+import { useFormStatus } from "react-dom";
+import { useActionState, useEffect } from "react";
+import NextForm from "next/form";
 import {
   type IlmomasiinaFieldError,
   ilmomasiinaFieldErrors,
@@ -213,7 +214,7 @@ function Form({
   deleteAction: typeof deleteSignUpAction;
 }) {
   const t = useScopedI18n("ilmomasiina.form");
-  const [state, formAction] = useFormState(saveAction, null);
+  const [state, formAction] = useActionState(saveAction, null);
   const isSignupPeriodEnded =
     !!event.registrationEndDate &&
     new Date(event.registrationEndDate) < new Date();
@@ -232,7 +233,7 @@ function Form({
   }, [state]);
 
   return (
-    <form
+    <NextForm
       action={formAction}
       className="shadow-solid w-full max-w-prose space-y-4 overflow-x-clip rounded-md border-2 border-gray-900 p-4 py-6 md:px-6 md:py-8"
     >
@@ -385,7 +386,7 @@ function Form({
           deleteAction={deleteAction}
         />
       </div>
-    </form>
+    </NextForm>
   );
 }
 

apps/web/src/app/[locale]/weekly-newsletters/[slug]/page.tsx

@@ -1,11 +1,15 @@
 import WeeklyNewsletterPage from "../../../../custom-pages/weekly-newsletter-page";
 
 interface PageProps {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export default function Page({ params: { slug } }: PageProps) {
+export default async function Page(props: PageProps) {
+  const params = await props.params;
+
+  const { slug } = params;
+
   return <WeeklyNewsletterPage slug={slug} />;
 }

apps/web/src/app/next_api/exit-preview/route.ts

@@ -1,6 +1,6 @@
 import { draftMode } from "next/headers";
 
-export function GET(): Response {
-  draftMode().disable();
+export async function GET(): Promise<Response> {
+  (await draftMode()).disable();
   return new Response("Draft mode is disabled");
 }

apps/web/src/app/next_api/preview/route.ts

@@ -37,13 +37,13 @@ export async function GET(
   const userRes = (await userReq.json()) as { user?: unknown } | null;
 
   if (!userReq.ok || !userRes?.user) {
-    draftMode().disable();
+    (await draftMode()).disable();
     return new Response("You are not allowed to preview this page", {
       status: 403,
     });
   }
 
-  draftMode().enable();
+  (await draftMode()).enable();
 
   redirect(url);
 }