fix(deps): update nextjs monorepo to v16 (major) (#4363)

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/next.config.ts

@@ -20,8 +20,8 @@ const withNextIntl = createNextIntlPlugin({
 const nextConfig: NextConfig = {
   output: "standalone",
   reactStrictMode: true,
-  /** We already do linting and typechecking as separate tasks in CI */
-  eslint: { ignoreDuringBuilds: true },
+  reactCompiler: true,
+  /** We already do typechecking as separate tasks in CI */
   typescript: { ignoreBuildErrors: true },
   /**
    * dockerode is required in the external server packages because of https://github.com/homarr-labs/homarr/issues/612
@@ -29,10 +29,16 @@ const nextConfig: NextConfig = {
   serverExternalPackages: ["dockerode"],
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
+    turbopackFileSystemCacheForDev: true,
   },
   transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
   images: {
-    domains: ["cdn.jsdelivr.net"],
+    localPatterns: [
+      {
+        pathname: "/**",
+        search: "",
+      },
+    ],
   },
   // eslint-disable-next-line @typescript-eslint/require-await,no-restricted-syntax
   async headers() {

apps/nextjs/package.json

@@ -68,6 +68,7 @@
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "chroma-js": "^3.1.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.18",
@@ -76,7 +77,7 @@
     "glob": "^11.0.3",
     "jotai": "^2.15.0",
     "mantine-react-table": "2.0.0-beta.9",
-    "next": "15.5.6",
+    "next": "16.0.1",
     "postcss-preset-mantine": "^1.18.0",
     "prismjs": "^1.30.0",
     "react": "19.2.0",

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect } from "react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Group, Menu, ScrollArea } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
@@ -29,6 +28,7 @@ import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { AppSelectModal } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import { useItemActions } from "~/components/board/items/item-actions";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";

apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import type { MantineColor } from "@mantine/core";
 import { Button, Card, Stack, Text } from "@mantine/core";
 import { IconBook2, IconCategoryPlus, IconLayoutDashboard, IconMailForward } from "@tabler/icons-react";
@@ -8,6 +7,7 @@ import { getMantineColor } from "@homarr/common";
 import { db } from "@homarr/db";
 import { createDocumentationLink } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
 
 export const InitFinish = async () => {

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from "react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconBox, IconPencil } from "@tabler/icons-react";
@@ -10,7 +9,7 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination } from "@homarr/ui";
+import { Link, SearchInput, TablePagination } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";

apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import Link from "next/link";
 import { Menu } from "@mantine/core";
 import { IconCopy, IconDeviceMobile, IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
 
@@ -12,6 +11,7 @@ import { revalidatePathActionAsync } from "@homarr/common/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { DuplicateBoardModal } from "@homarr/modals-collection";
 import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import { useBoardPermissions } from "~/components/board/permissions/client";
 

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import {
   ActionIcon,
   Badge,
@@ -21,7 +20,7 @@ import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
-import { UserAvatar } from "@homarr/ui";
+import { Link, UserAvatar } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
 import { ManageContainer } from "~/components/manage/manage-container";

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Alert, Anchor, Button, ButtonGroup, Fieldset, Group, Stack, Text, TextInput } from "@mantine/core";
 import { IconInfoCircle, IconPencil, IconPlus, IconUnlink } from "@tabler/icons-react";
@@ -17,6 +16,7 @@ import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { AppSelectModal } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { integrationUpdateSchema } from "@homarr/validation/integration";
 
 import { SecretCard } from "../../_components/secrets/integration-secret-card";

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx

@@ -2,13 +2,12 @@
 
 import type { ChangeEvent } from "react";
 import React, { useMemo, useState } from "react";
-import Link from "next/link";
 import { Flex, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { IntegrationAvatar } from "@homarr/ui";
+import { IntegrationAvatar, Link } from "@homarr/ui";
 
 interface IntegrationCreateDropdownContentProps {
   enableMockIntegration: boolean;

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { startTransition, useState } from "react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   Alert,
@@ -36,6 +35,7 @@ import type { GetInputPropsReturnType, UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { appHrefSchema } from "@homarr/validation/app";
 import { integrationCreateSchema } from "@homarr/validation/integration";
 

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from "react";
 import type { PropsWithChildren } from "react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
   AccordionControl,
@@ -36,7 +35,7 @@ import { objectEntries } from "@homarr/common";
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { CountBadge, IntegrationAvatar } from "@homarr/ui";
+import { CountBadge, IntegrationAvatar, Link } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";

apps/nextjs/src/app/[locale]/manage/medias/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   ActionIcon,
@@ -25,7 +24,7 @@ import { humanFileSize } from "@homarr/common";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { createLocalImageUrl } from "@homarr/icons/local";
 import { getI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
+import { Link, SearchInput, TablePagination, UserAvatar } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { Card, Group, SimpleGrid, Space, Stack, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";

apps/nextjs/src/app/[locale]/manage/search-engines/_form.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Link from "next/link";
 import type { SegmentedControlItem } from "@mantine/core";
 import { Button, Fieldset, Grid, Group, SegmentedControl, Stack, Textarea, TextInput } from "@mantine/core";
 import { WidgetIntegrationSelect } from "node_modules/@homarr/widgets/src/widget-integration-select";
@@ -12,6 +11,7 @@ import { useZodForm } from "@homarr/form";
 import { IconPicker } from "@homarr/forms-collection";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 import { searchEngineManageSchema } from "@homarr/validation/search-engine";
 
 type FormType = z.infer<typeof searchEngineManageSchema>;

apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
@@ -9,7 +8,7 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import type { inferSearchParamsFromSchema } from "@homarr/common/types";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination } from "@homarr/ui";
+import { Link, SearchInput, TablePagination } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";

apps/nextjs/src/app/[locale]/manage/tools/certificates/hostnames/page.tsx

@@ -1,5 +1,4 @@
 import { X509Certificate } from "node:crypto";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   Button,
@@ -19,6 +18,7 @@ import { IconCertificateOff } from "@tabler/icons-react";
 import { auth } from "@homarr/auth/next";
 import { getTrustedCertificateHostnamesAsync } from "@homarr/certificates/server";
 import { getI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";

apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx

@@ -1,5 +1,4 @@
 import { X509Certificate } from "node:crypto";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Button, Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { IconAlertTriangle, IconCertificate, IconCertificateOff } from "@tabler/icons-react";
@@ -10,6 +9,7 @@ import { loadCustomRootCertificatesAsync } from "@homarr/certificates/server";
 import { getMantineColor } from "@homarr/common";
 import type { SupportedLanguage } from "@homarr/translation";
 import { getI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";

apps/nextjs/src/app/[locale]/manage/tools/docker/error.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
 import { Anchor, Center, Stack, Text } from "@mantine/core";
 import { IconShipOff } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 export default function DockerErrorPage() {
   const t = useI18n();

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/error.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
 import { Anchor, Center, Stack, Text } from "@mantine/core";
 import { IconCubeOff } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 export default function KubernetesErrorPage() {
   const t = useI18n();

apps/nextjs/src/app/[locale]/manage/tools/kubernetes/cluster-dashboard/resource-tile/resource-tile.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { Card, Group, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import type { KubernetesLabelResourceType } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import classes from "./resource-tile.module.css";
 

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useMemo } from "react";
-import Link from "next/link";
 import { Anchor, Button, Group, Text, Title, Tooltip } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
@@ -10,7 +9,7 @@ import { MantineReactTable } from "mantine-react-table";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
+import { Link, UserAvatar } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 interface UserListComponentProps {

apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.tsx

@@ -1,8 +1,8 @@
-import Link from "next/link";
 import { Button, Card, Group } from "@mantine/core";
 import { IconArrowBackUp, IconArrowLeft, IconArrowRight, IconRotate } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 interface StepperNavigationComponentProps {
   hasPrevious: boolean;

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import type { ReactNode } from "react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { NavLink } from "@mantine/core";
 
+import { Link } from "@homarr/ui";
+
 interface NavigationLinkProps {
   href: string;
   label: string;

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import Link from "next/link";
 import { Alert, Anchor } from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
 
 import { createDocumentationLink } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 export const ReservedGroupAlert = () => {
   const t = useI18n();

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx

@@ -1,10 +1,10 @@
 import type { PropsWithChildren } from "react";
-import Link from "next/link";
 import { Button, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
 import { IconId, IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { NavigationLink } from "./_navigation";

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Alert, Anchor, Center, Group, Stack, Table, TableTbody, TableTd, TableTr, Text, Title } from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
@@ -10,7 +9,7 @@ import { auth } from "@homarr/auth/next";
 import { isProviderEnabled } from "@homarr/auth/server";
 import { everyoneGroup } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
-import { SearchInput, UserAvatar } from "@homarr/ui";
+import { Link, SearchInput, UserAvatar } from "@homarr/ui";
 
 import { ReservedGroupAlert } from "../_reserved-group-alert";
 import { AddGroupMember } from "./_add-group-member";

apps/nextjs/src/app/[locale]/manage/users/groups/_groups-table.tsx

@@ -2,7 +2,6 @@
 
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import Link from "next/link";
 import type { DragEndEvent, DraggableAttributes, DragStartEvent } from "@dnd-kit/core";
 import {
   closestCenter,
@@ -41,7 +40,7 @@ import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { UserAvatarGroup } from "@homarr/ui";
+import { Link, UserAvatarGroup } from "@homarr/ui";
 
 interface GroupsTableProps {
   initialGroupIds: string[];

apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Card, Group, Stack, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
 import { IconChevronRight, IconUsersGroup } from "@tabler/icons-react";
@@ -7,6 +6,7 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { everyoneGroup } from "@homarr/definitions";
 import { getI18n } from "@homarr/translation/server";
+import { Link } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";

apps/nextjs/src/components/access/group-access-form.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
-import Link from "next/link";
 import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
 import { useModalAction } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import type { AccessQueryData } from "./access-settings";
 import { AccessSelectRow } from "./access-table-rows";

apps/nextjs/src/components/access/user-access-form.tsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
-import Link from "next/link";
 import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
 import { useModalAction } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
+import { Link, UserAvatar } from "@homarr/ui";
 
 import type { AccessQueryData } from "./access-settings";
 import { AccessDisplayRow, AccessSelectRow } from "./access-table-rows";

apps/nextjs/src/components/layout/header.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
-import Link from "next/link";
 import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Spotlight } from "@homarr/spotlight";
+import { Link } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";

apps/nextjs/src/components/layout/header/button.tsx

@@ -1,9 +1,10 @@
 import type { ForwardedRef, ReactNode } from "react";
 import { forwardRef } from "react";
-import Link from "next/link";
 import type { ActionIconProps } from "@mantine/core";
 import { ActionIcon } from "@mantine/core";
 
+import { Link } from "@homarr/ui";
+
 type HeaderButtonProps = (
   | {
       onClick?: () => void;

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import type { ReactNode } from "react";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { NavLink } from "@mantine/core";
 
+import { Link } from "@homarr/ui";
+
 export const CommonNavLink = (props: ClientNavigationLink) =>
   "href" in props ? <NavLinkHref {...props} /> : <NavLinkWithItems {...props} />;
 

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -2,7 +2,6 @@
 
 import type { ReactNode } from "react";
 import { useCallback, useEffect } from "react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Center, Menu, Stack, Text, useMantineColorScheme } from "@mantine/core";
 import { useHotkeys, useTimeout } from "@mantine/hooks";
@@ -22,6 +21,7 @@ import { signOut, useSession } from "@homarr/auth/client";
 import { hotkeys } from "@homarr/definitions";
 import { createModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
+import { Link } from "@homarr/ui";
 
 import { useAuthContext } from "~/app/[locale]/_client-providers/session";
 import { CurrentLanguageCombobox } from "./language/current-language-combobox";

apps/nextjs/src/proxy.ts

@@ -1,10 +1,7 @@
-import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
-import { createTRPCClient, httpLink } from "@trpc/client";
-import SuperJSON from "superjson";
+import { NextResponse } from "next/server";
 
-import type { AppRouter } from "@homarr/api";
-import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
+import { api } from "@homarr/api/server";
 import { localeCookieKey } from "@homarr/definitions";
 import type { SupportedLanguage } from "@homarr/translation";
 import { supportedLanguages } from "@homarr/translation";
@@ -12,12 +9,12 @@ import { createI18nMiddleware } from "@homarr/translation/middleware";
 
 let isOnboardingFinished = false;
 
-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
   // Redirect to onboarding if it's not finished yet
   const pathname = request.nextUrl.pathname;
 
   if (!isOnboardingFinished && !pathname.endsWith("/init")) {
-    const currentOnboardingStep = await serverFetchApi.onboard.currentStep.query();
+    const currentOnboardingStep = await api.onboard.currentStep();
     if (currentOnboardingStep.current !== "finish") {
       return NextResponse.redirect(new URL("/init", request.url));
     }
@@ -29,11 +26,12 @@ export async function middleware(request: NextRequest) {
   const currentLocale = request.cookies.get(localeCookieKey)?.value;
   let defaultLocale: SupportedLanguage = "en";
   if (!currentLocale || !supportedLanguages.includes(currentLocale as SupportedLanguage)) {
-    defaultLocale = await serverFetchApi.serverSettings.getCulture.query().then((culture) => culture.defaultLocale);
+    defaultLocale = await api.serverSettings.getCulture().then((culture) => culture.defaultLocale);
   }
 
   // We don't want to fallback to accept-language header so we clear it
   request.headers.set("accept-language", "");
+
   const next = createI18nMiddleware(defaultLocale);
   return next(request);
 }
@@ -41,13 +39,3 @@ export async function middleware(request: NextRequest) {
 export const config = {
   matcher: ["/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)"],
 };
-
-export const serverFetchApi = createTRPCClient<AppRouter>({
-  links: [
-    httpLink({
-      url: getTrpcUrl(),
-      transformer: SuperJSON,
-      headers: createHeadersCallbackForSource("server-fetch"),
-    }),
-  ],
-});