Switch from relative imports to absolute imports

src/components/BoxTable.tsx

@@ -1,5 +1,5 @@
-import {classNames, range} from "../utils/helpers";
-import BoxGraphic from "./BoxGraphic";
+import {classNames, range} from "@/utils/helpers";
+import BoxGraphic from "@/components/BoxGraphic";
 import Xarrow from "react-xarrows";
 
 import Chance from "chance";

src/pages/_app.tsx

@@ -1,8 +1,8 @@
 import { type AppType } from "next/app";
 
-import { trpc } from "../utils/trpc";
+import { trpc } from "@/utils/trpc";
 
-import "../styles/globals.scss";
+import "@/styles/globals.scss";
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

src/pages/api/trpc/[trpc].ts

@@ -1,8 +1,8 @@
 import { createNextApiHandler } from "@trpc/server/adapters/next";
 
-import { env } from "../../../env/server.mjs";
-import { createContext } from "../../../server/trpc/context";
-import { appRouter } from "../../../server/trpc/router/_app";
+import { env } from "@/env/server.mjs";
+import { createContext } from "@/server/trpc/context";
+import { appRouter } from "@/server/trpc/router/_app";
 
 // export API handler
 export default createNextApiHandler({

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import {type NextPage} from "next";
 import Head from "next/head";
-import BoxTable from "../components/BoxTable";
+import BoxTable from "@/components/BoxTable";
 import NoSSR from "react-no-ssr";
 import Link from "next/link";
 

src/server/trpc/router/_app.ts

@@ -1,5 +1,5 @@
-import { router } from "../trpc";
-import { exampleRouter } from "./example";
+import { router } from "@/server/trpc/trpc";
+import { exampleRouter } from "@/server/trpc/router/example";
 
 export const appRouter = router({
   example: exampleRouter,

src/server/trpc/router/example.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { router, publicProcedure } from "../trpc";
+import { router, publicProcedure } from "@/server/trpc/trpc";
 
 export const exampleRouter = router({
   hello: publicProcedure

src/server/trpc/trpc.ts

@@ -1,7 +1,7 @@
 import { initTRPC } from "@trpc/server";
 import superjson from "superjson";
 
-import { type Context } from "./context";
+import { type Context } from "@/server/trpc/context";
 
 const t = initTRPC.context<Context>().create({
   transformer: superjson,

src/utils/trpc.ts

@@ -3,7 +3,7 @@ import { createTRPCNext } from "@trpc/next";
 import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
 import superjson from "superjson";
 
-import { type AppRouter } from "../server/trpc/router/_app";
+import { type AppRouter } from "@/server/trpc/router/_app";
 
 const getBaseUrl = () => {
   if (typeof window !== "undefined") return ""; // browser should use relative url

tsconfig.json

@@ -14,7 +14,11 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "noUncheckedIndexedAccess": true
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
   "exclude": ["node_modules"]