docs: Convert relative imports to @ aliases in examples (#83813)

## For Contributors

### Improving Documentation

This PR improves the Next.js examples by converting relative imports to
@ aliases, making them more readable and maintainable.

## Description

Fixes #83717 by converting deep relative imports to clean @ aliases in
Next.js examples.

Currently, Next.js examples use long relative imports like:
```typescript
import { i18n, type Locale } from "../../../i18n-config";
```
This PR updates them to use clean @ aliases:
```typescript
import { i18n, type Locale } from "@/i18n-config";
```

## Changes Made

- **Added path alias configuration** `"@/*": ["./*"]` to tsconfig.json
files
- **Converted deep relative imports** (d:) to clean @ aliases (`@/`)
- **Updated examples**:
  - `i18n-routing` (specifically mentioned in issue #83717) - 5 files
  - `with-typescript` - 2 files  
  - `with-grafbase` - 2 files
  - `with-mongodb-mongoose` - 2 files

## Benefits

-  **Improved readability**: `@/config` vs `../../../config`
-  **Reduced errors**: No need to count `../` levels when refactoring
-  **Better maintainability**: Easier to move files around
-  **Modern standards**: Aligns with production Next.js practices
-  **Better IDE support**: Enhanced autocomplete and navigation

## Examples of Changes

### Before:
```typescript
import { i18n, type Locale } from "../../../i18n-config";
import { getDictionary } from "../../get-dictionary";
import { grafbase } from "../../../lib/grafbase";
```

### After:
```typescript
import { i18n, type Locale } from "@/i18n-config";
import { getDictionary } from "@/get-dictionary";
import { grafbase } from "@/lib/grafbase";
```

## Testing

-  TypeScript compilation works correctly
-  @ imports resolve properly in IDE
-  Runtime functionality preserved
-  No breaking changes to example functionality

This change is purely a developer experience improvement and doesn't
affect runtime behavior.

---------

Co-authored-by: dharunr36 <[email protected]>
Co-authored-by: Joseph <[email protected]>

Author: 3 people

examples/i18n-routing/app/[lang]/components/counter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { type getDictionary } from "../../../get-dictionary";
+import { type getDictionary } from "@/get-dictionary";
 
 export default function Counter({
   dictionary,

examples/i18n-routing/app/[lang]/components/locale-switcher.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import { i18n, type Locale } from "../../../i18n-config";
+import { i18n, type Locale } from "@/i18n-config";
 
 export default function LocaleSwitcher() {
   const pathname = usePathname();

examples/i18n-routing/app/[lang]/layout.tsx

@@ -1,4 +1,4 @@
-import { i18n, type Locale } from "../../i18n-config";
+import { i18n, type Locale } from "@/i18n-config";
 
 export const metadata = {
   title: "i18n within app router - Vercel Examples",

examples/i18n-routing/app/[lang]/page.tsx

@@ -1,5 +1,5 @@
-import { getDictionary } from "../../get-dictionary";
-import { Locale } from "../../i18n-config";
+import { getDictionary } from "@/get-dictionary";
+import { Locale } from "@/i18n-config";
 import Counter from "./components/counter";
 import LocaleSwitcher from "./components/locale-switcher";
 

examples/i18n-routing/tsconfig.json

@@ -18,7 +18,10 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": [
     "next-env.d.ts",

examples/with-grafbase/app/posts/[slug]/page.tsx

@@ -1,5 +1,5 @@
-import { graphql } from "../../../gql";
-import { grafbase } from "../../../lib/grafbase";
+import { graphql } from "@/gql";
+import { grafbase } from "@/lib/grafbase";
 
 const GetPostBySlugDocument = graphql(/* GraphQL */ `
   query GetPostBySlug($slug: String!) {

examples/with-grafbase/tsconfig.json

@@ -18,7 +18,10 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

examples/with-mongodb-mongoose/pages/[id]/edit.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import Form from "../../components/Form";
+import Form from "@/components/Form";
 
 const fetcher = (url: string) =>
   fetch(url)

examples/with-mongodb-mongoose/pages/[id]/index.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-import dbConnect from "../../lib/dbConnect";
-import Pet, { Pets } from "../../models/Pet";
+import dbConnect from "@/lib/dbConnect";
+import Pet, { Pets } from "@/models/Pet";
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { ParsedUrlQuery } from "querystring";
 

examples/with-mongodb-mongoose/pages/api/pets/[id].ts

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import dbConnect from "../../../lib/dbConnect";
-import Pet from "../../../models/Pet";
+import dbConnect from "@/lib/dbConnect";
+import Pet from "@/models/Pet";
 
 export default async function handler(
   req: NextApiRequest,