perf: try to improve nextjs dev performance

apps/nextjs/next.config.ts

@@ -17,7 +17,7 @@ const withNextIntl = createNextIntlPlugin({
   requestConfig: "../../packages/translation/src/request.ts",
 });
 
-interface WebpackConfig {
+interface _WebpackConfig {
   module: {
     rules: {
       test: RegExp;
@@ -32,7 +32,7 @@ const nextConfig: NextConfig = {
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-  webpack: (config: WebpackConfig, { isServer }) => {
+  /*webpack: (config: WebpackConfig, { isServer }) => {
     if (isServer) {
       config.module.rules.push({
         test: /\.node$/,
@@ -41,11 +41,21 @@ const nextConfig: NextConfig = {
     }
 
     return config;
-  },
+  },*/
   experimental: {
     optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
   },
-  transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
+  serverExternalPackages: [
+    "dockerode",
+    "@kubernetes/client-node",
+    "@ctrl/deluge",
+    "@ctrl/qbittorrent",
+    "@ctrl/transmission",
+    "node-ical",
+    "tsdav",
+    "proxmox-api",
+    "@jellyfin/sdk",
+  ],
   images: {
     domains: ["cdn.jsdelivr.net"],
   },

packages/api/src/root.ts

@@ -1,52 +1,31 @@
-import { apiKeysRouter } from "./router/apiKeys";
-import { appRouter as innerAppRouter } from "./router/app";
-import { boardRouter } from "./router/board";
-import { certificateRouter } from "./router/certificates/certificate-router";
-import { cronJobsRouter } from "./router/cron-jobs";
-import { dockerRouter } from "./router/docker/docker-router";
-import { groupRouter } from "./router/group";
-import { homeRouter } from "./router/home";
-import { iconsRouter } from "./router/icons";
-import { importRouter } from "./router/import/import-router";
-import { integrationRouter } from "./router/integration/integration-router";
-import { inviteRouter } from "./router/invite";
-import { kubernetesRouter } from "./router/kubernetes/router/kubernetes-router";
-import { locationRouter } from "./router/location";
-import { logRouter } from "./router/log";
-import { mediaRouter } from "./router/medias/media-router";
-import { onboardRouter } from "./router/onboard/onboard-router";
-import { searchEngineRouter } from "./router/search-engine/search-engine-router";
-import { sectionRouter } from "./router/section/section-router";
-import { serverSettingsRouter } from "./router/serverSettings";
-import { updateCheckerRouter } from "./router/update-checker";
-import { userRouter } from "./router/user";
-import { widgetRouter } from "./router/widgets";
+import { lazy } from "@trpc/server";
+
 import { createTRPCRouter } from "./trpc";
 
 export const appRouter = createTRPCRouter({
-  user: userRouter,
-  group: groupRouter,
-  invite: inviteRouter,
-  integration: integrationRouter,
-  board: boardRouter,
-  section: sectionRouter,
-  app: innerAppRouter,
-  searchEngine: searchEngineRouter,
-  widget: widgetRouter,
-  location: locationRouter,
-  log: logRouter,
-  icon: iconsRouter,
-  import: importRouter,
-  onboard: onboardRouter,
-  home: homeRouter,
-  docker: dockerRouter,
-  kubernetes: kubernetesRouter,
-  serverSettings: serverSettingsRouter,
-  cronJobs: cronJobsRouter,
-  apiKeys: apiKeysRouter,
-  media: mediaRouter,
-  updateChecker: updateCheckerRouter,
-  certificates: certificateRouter,
+  user: lazy(() => import("./router/user").then((mod) => mod.userRouter)),
+  group: lazy(() => import("./router/group").then((mod) => mod.groupRouter)),
+  invite: lazy(() => import("./router/invite").then((mod) => mod.inviteRouter)),
+  integration: lazy(() => import("./router/integration/integration-router").then((mod) => mod.integrationRouter)),
+  board: lazy(() => import("./router/board").then((mod) => mod.boardRouter)),
+  section: lazy(() => import("./router/section/section-router").then((mod) => mod.sectionRouter)),
+  app: lazy(() => import("./router/app").then((mod) => mod.appRouter)),
+  searchEngine: lazy(() => import("./router/search-engine/search-engine-router").then((mod) => mod.searchEngineRouter)),
+  widget: lazy(() => import("./router/widgets").then((mod) => mod.widgetRouter)),
+  location: lazy(() => import("./router/location").then((mod) => mod.locationRouter)),
+  log: lazy(() => import("./router/log").then((mod) => mod.logRouter)),
+  icon: lazy(() => import("./router/icons").then((mod) => mod.iconsRouter)),
+  import: lazy(() => import("./router/import/import-router").then((mod) => mod.importRouter)),
+  onboard: lazy(() => import("./router/onboard/onboard-router").then((mod) => mod.onboardRouter)),
+  home: lazy(() => import("./router/home").then((mod) => mod.homeRouter)),
+  docker: lazy(() => import("./router/docker/docker-router").then((mod) => mod.dockerRouter)),
+  kubernetes: lazy(() => import("./router/kubernetes/router/kubernetes-router").then((mod) => mod.kubernetesRouter)),
+  serverSettings: lazy(() => import("./router/serverSettings").then((mod) => mod.serverSettingsRouter)),
+  cronJobs: lazy(() => import("./router/cron-jobs").then((mod) => mod.cronJobsRouter)),
+  apiKeys: lazy(() => import("./router/apiKeys").then((mod) => mod.apiKeysRouter)),
+  media: lazy(() => import("./router/medias/media-router").then((mod) => mod.mediaRouter)),
+  updateChecker: lazy(() => import("./router/update-checker").then((mod) => mod.updateCheckerRouter)),
+  certificates: lazy(() => import("./router/certificates/certificate-router").then((mod) => mod.certificateRouter)),
 });
 
 // export type definition of API

packages/api/src/router/widgets/index.ts

@@ -1,40 +1,24 @@
+import { lazy } from "@trpc/server";
+
 import { createTRPCRouter } from "../../trpc";
-import { appRouter } from "./app";
-import { calendarRouter } from "./calendar";
-import { dnsHoleRouter } from "./dns-hole";
-import { downloadsRouter } from "./downloads";
-import { healthMonitoringRouter } from "./health-monitoring";
-import { indexerManagerRouter } from "./indexer-manager";
-import { mediaRequestsRouter } from "./media-requests";
-import { mediaServerRouter } from "./media-server";
-import { mediaTranscodingRouter } from "./media-transcoding";
-import { minecraftRouter } from "./minecraft";
-import { networkControllerRouter } from "./network-controller";
-import { notebookRouter } from "./notebook";
-import { optionsRouter } from "./options";
-import { releasesRouter } from "./releases";
-import { rssFeedRouter } from "./rssFeed";
-import { smartHomeRouter } from "./smart-home";
-import { stockPriceRouter } from "./stocks";
-import { weatherRouter } from "./weather";
 
 export const widgetRouter = createTRPCRouter({
-  notebook: notebookRouter,
-  weather: weatherRouter,
-  app: appRouter,
-  dnsHole: dnsHoleRouter,
-  smartHome: smartHomeRouter,
-  stockPrice: stockPriceRouter,
-  mediaServer: mediaServerRouter,
-  calendar: calendarRouter,
-  downloads: downloadsRouter,
-  mediaRequests: mediaRequestsRouter,
-  rssFeed: rssFeedRouter,
-  indexerManager: indexerManagerRouter,
-  healthMonitoring: healthMonitoringRouter,
-  mediaTranscoding: mediaTranscodingRouter,
-  minecraft: minecraftRouter,
-  options: optionsRouter,
-  releases: releasesRouter,
-  networkController: networkControllerRouter,
+  notebook: lazy(() => import("./notebook").then((mod) => mod.notebookRouter)),
+  weather: lazy(() => import("./weather").then((mod) => mod.weatherRouter)),
+  app: lazy(() => import("./app").then((mod) => mod.appRouter)),
+  dnsHole: lazy(() => import("./dns-hole").then((mod) => mod.dnsHoleRouter)),
+  smartHome: lazy(() => import("./smart-home").then((mod) => mod.smartHomeRouter)),
+  stockPrice: lazy(() => import("./stocks").then((mod) => mod.stockPriceRouter)),
+  mediaServer: lazy(() => import("./media-server").then((mod) => mod.mediaServerRouter)),
+  calendar: lazy(() => import("./calendar").then((mod) => mod.calendarRouter)),
+  downloads: lazy(() => import("./downloads").then((mod) => mod.downloadsRouter)),
+  mediaRequests: lazy(() => import("./media-requests").then((mod) => mod.mediaRequestsRouter)),
+  rssFeed: lazy(() => import("./rssFeed").then((mod) => mod.rssFeedRouter)),
+  indexerManager: lazy(() => import("./indexer-manager").then((mod) => mod.indexerManagerRouter)),
+  healthMonitoring: lazy(() => import("./health-monitoring").then((mod) => mod.healthMonitoringRouter)),
+  mediaTranscoding: lazy(() => import("./media-transcoding").then((mod) => mod.mediaTranscodingRouter)),
+  minecraft: lazy(() => import("./minecraft").then((mod) => mod.minecraftRouter)),
+  options: lazy(() => import("./options").then((mod) => mod.optionsRouter)),
+  releases: lazy(() => import("./releases").then((mod) => mod.releasesRouter)),
+  networkController: lazy(() => import("./network-controller").then((mod) => mod.networkControllerRouter)),
 });