Files
next.js/examples/i18n-routing/app/[lang]/layout.tsx
d43e5f9378 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]>
2025-09-16 15:53:53 +02:00

26 lines
583 B
TypeScript

import { i18n, type Locale } from "@/i18n-config";
export const metadata = {
title: "i18n within app router - Vercel Examples",
description: "How to do i18n in Next.js 15 within app router",
};
export async function generateStaticParams() {
return i18n.locales.map((locale) => ({ lang: locale }));
}
export default async function Root(props: {
children: React.ReactNode;
params: Promise<{ lang: Locale }>;
}) {
const params = await props.params;
const { children } = props;
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
);
}