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 <dharunr.23aid@kongu.edu>
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>