Upgrade nextjs to 16

ui/.storybook/main.ts

@@ -35,16 +35,6 @@ const config: StorybookConfig = {
           new TsconfigPathsPlugin(),
       ];
 
-      // This is a workaround to a bug in storybook that prevents storybook v10.x.x working with Next.js v14.x.x
-      // See: https://github.com/storybookjs/storybook/issues/32950
-      //
-      // This can be removed when we upgrade to Next.js v15.0.0+ or if storybook releases a fix in a newer
-      // version.
-      config.resolve.alias = {
-          ...(config.resolve.alias || {}),
-          'next/dist/server/request/draft-mode': false,
-      };
-
       return config;
   }
 };

ui/app/[locale]/layout.tsx

@@ -9,7 +9,8 @@ type Props = {
 };
 
 export default async function Layout({ children, params: { locale } }: Props) {
-  const messages = await getMessages();
+  const messages = await getMessages({ locale });
+
   return (
     <NextIntlProvider locale={locale} messages={messages}>
       {children}

ui/components/Table/ResponsiveTable.tsx

@@ -26,10 +26,11 @@ import {
   ReactNode,
   Ref,
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
-import useResizeObserver from "use-resize-observer";
 import "./ResponsiveTable.css";
 
 export type RenderHeaderCb<TCol> = (props: {
@@ -119,23 +120,38 @@ export const ResponsiveTable = <TRow, TCol>({
   const [expanded, setExpanded] = useState<Record<number, number | undefined>>(
     {},
   );
-  const [width, setWidth] = useState(1000);
-  let animationHandle: number;
-  /**
-   * resize the columns on a rAF loop to render the table at 60fps
-   * @param width
-   */
-  const onResize = ({ width }: { width: number | undefined }) => {
-    if (animationHandle) {
-      cancelAnimationFrame(animationHandle);
+const tableRef = useRef<HTMLTableElement | null>(null);
+const rafId = useRef<number | null>(null);
+
+const [width, setWidth] = useState(1000);
+
+useEffect(() => {
+  if (!tableRef.current) return;
+
+  const observer = new ResizeObserver(entries => {
+    const entry = entries[0];
+    if (!entry) return;
+
+    const newWidth = entry.contentRect.width;
+
+    if (rafId.current !== null) {
+      cancelAnimationFrame(rafId.current);
     }
-    if (width) {
-      animationHandle = requestAnimationFrame(() => {
-        setWidth(width);
-      });
+
+    rafId.current = requestAnimationFrame(() => {
+      setWidth(newWidth);
+    });
+  });
+
+  observer.observe(tableRef.current);
+
+  return () => {
+    if (rafId.current !== null) {
+      cancelAnimationFrame(rafId.current);
     }
+    observer.disconnect();
   };
-  const { ref } = useResizeObserver({ onResize });
+}, []);
   const showColumns = width >= stackedLayoutBreakpoint;
 
   const canColumnBeHidden = useCallback(
@@ -220,7 +236,7 @@ export const ResponsiveTable = <TRow, TCol>({
     <Table
       aria-label={ariaLabel}
       gridBreakPoint=""
-      ref={ref}
+      ref={tableRef}
       className={showColumns ? "" : "pf-m-grid"}
       ouiaId={tableOuiaId}
       variant={variant}

ui/i18n.tsx

@@ -14,3 +14,4 @@ export default getRequestConfig(async ({ requestLocale }) => {
     locale,
   };
 });
+

ui/next.config.js

@@ -10,6 +10,9 @@ const nextConfig = {
   experimental: {
     // typedRoutes: true, // disabled until next-intl is compatible with this
   },
+  turbopack: {
+    root: __dirname, // optional but recommended
+  },
   typescript: {
     //ignoreBuildErrors: true,
   },