chore: Adds deprecated-imports-next-router (#14486)

Author: zomars

apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { FC } from "react";
 import React, { useState, useCallback, useEffect } from "react";
 import { useForm, useFieldArray } from "react-hook-form";

apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx

@@ -1,5 +1,5 @@
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import React from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";

packages/eslint-plugin/src/configs/recommended.ts

@@ -3,6 +3,7 @@ const recommended = {
   parserOptions: { sourceType: "module" },
   rules: {
     "@calcom/eslint/deprecated-imports": "error",
+    "@calcom/eslint/deprecated-imports-next-router": "error",
     "@calcom/eslint/avoid-web-storage": "error",
     "@calcom/eslint/avoid-prisma-client-import-for-enums": "error",
   },

packages/eslint-plugin/src/rules/deprecated-imports-next-router.ts

@@ -0,0 +1,38 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+const createRule = ESLintUtils.RuleCreator((name) => `https://developer.cal.com/eslint/rule/${name}`);
+
+const rule = createRule({
+  name: "deprecated-imports-next-router",
+  meta: {
+    fixable: "code",
+    docs: {
+      description: "Importing router from 'next/router' is deprecated, use 'next/navigation' instead",
+      recommended: "error",
+    },
+    messages: {
+      "deprecated-next-router":
+        "Importing router from 'next/router' is deprecated, use 'next/navigation' instead",
+    },
+    type: "problem",
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === "next/router") {
+          context.report({
+            node,
+            messageId: "deprecated-next-router",
+            fix: function (fixer) {
+              return fixer.replaceText(node.source, "'next/navigation'");
+            },
+          });
+        }
+      },
+    };
+  },
+});
+
+export default rule;

packages/eslint-plugin/src/rules/index.ts

@@ -5,4 +5,5 @@ export default {
   "deprecated-imports": require("./deprecated-imports").default,
   "avoid-web-storage": require("./avoid-web-storage").default,
   "avoid-prisma-client-import-for-enums": require("./avoid-prisma-client-import-for-enums").default,
+  "deprecated-imports-next-router": require("./deprecated-imports-next-router").default,
 } as ESLint.Plugin["rules"];

packages/lib/next-seo.config.ts

@@ -1,5 +1,4 @@
 import type { DefaultSeoProps, NextSeoProps } from "next-seo";
-import type { Router } from "next/router";
 
 import { APP_NAME, SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
 
@@ -47,12 +46,6 @@ export const seoConfig: {
  * @param path NextJS' useRouter().asPath
  * @returns
  */
-export const buildCanonical = ({
-  origin,
-  path,
-}: {
-  origin: Location["origin"];
-  path: Router["asPath"] | null;
-}) => {
+export const buildCanonical = ({ origin, path }: { origin: Location["origin"]; path: string | null }) => {
   return `${origin}${path === "/" ? "" : path}`.split("?")[0];
 };

packages/platform/examples/base/src/pages/[bookingUid].tsx

@@ -2,7 +2,7 @@ import { Navbar } from "@/components/Navbar";
 import { CheckCircle2Icon } from "lucide-react";
 import { X } from "lucide-react";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { useGetBooking, useCancelBooking } from "@calcom/atoms";
 import dayjs from "@calcom/dayjs";

packages/platform/examples/base/src/pages/booking.tsx

@@ -1,6 +1,6 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { Booker, useEventTypesPublic } from "@calcom/atoms";

packages/platform/examples/base/src/pages/bookings.tsx

@@ -1,6 +1,6 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { useGetBookings } from "@calcom/atoms";
 import dayjs from "@calcom/dayjs";