ASSISTANT
Конечно! Давайте преобразуем предыдущий пример в TypeScript, чтобы использовать строгую типизацию и повысить качество кода. В этом примере мы создадим API-прокси с использованием App Router и TypeScript в Next.js.
### Шаг 1: Создание структуры папок
Создайте файл `route.ts` в директории `app/api/proxy/images/`:
```
/app/api/proxy/images/route.ts
```
### Шаг 2: Реализация логики проксирования с использованием TypeScript
Вот как может выглядеть реализация API-прокси с TypeScript:
```typescript
import axios from 'axios';
import { NextResponse } from 'next/server';
const EXTERNAL_API_URL = 'https://example.com/images';
export async function GET(req: Request) {
try {
const response = await axios.get(EXTERNAL_API_URL, {
headers: {
'Content-Type': req.headers.get('Content-Type') || 'application/json',
},
});
return NextResponse.json(response.data, { status: response.status });
} catch (error) {
console.error('Error in proxy:', error);
if (axios.isAxiosError(error) && error.response) {
return NextResponse.json(error.response.data, { status: error.response.status });
}
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
}
}
export async function POST(req: Request) {
try {
const body = await req.json(); // Получаем данные из тела запроса
const response = await axios.post(EXTERNAL_API_URL, body, {
headers: {
'Content-Type': req.headers.get('Content-Type') || 'application/json',
},
});
return NextResponse.json(response.data, { status: response.status });
} catch (error) {
console.error('Error in proxy:', error);
if (axios.isAxiosError(error) && error.response) {
return NextResponse.json(error.response.data, { status: error.response.status });
}
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
}
}
```
### Шаг 3: Обработка других методов (по желанию)
Если вы хотите поддерживать другие HTTP методы, такие как PUT или DELETE, вы можете добавить аналогичные функции:
```typescript
export async function PUT(req: Request) {
try {
const body = await req.json();
const response = await axios.put(EXTERNAL_API_URL, body, {
headers: {
'Content-Type': req.headers.get('Content-Type') || 'application/json',
},
});
return NextResponse.json(response.data, { status: response.status });
} catch (error) {
console.error('Error in proxy:', error);
if (axios.isAxiosError(error) && error.response) {
return NextResponse.json(error.response.data, { status: error.response.status });
}
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
}
}
export async function DELETE(req: Request) {
try {
const response = await axios.delete(EXTERNAL_API_URL, {
headers: {
'Content-Type': req.headers.get('Content-Type') || 'application/json',
},
});
return NextResponse.json(response.data, { status: response.status });
} catch (error) {
console.error('Error in proxy:', error);
if (axios.isAxiosError(error) && error.response) {
return NextResponse.json(error.response.data, { status: error.response.status });
}
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
}
}
```
### Шаг 4: Использование прокси на клиенте
Для клиентской части вы по-прежнему можете использовать следующий код:
```javascript
async function fetchData() {
const response = await fetch('/api/proxy/images', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
console.log(data);
}
```
### Примечания
1. **Типы:** TypeScript помогает с типизацией - мы используем `Request` для запроса, а также указываем правительное название, которое возвращается из `NextResponse.json()`.
2. **Axios:** Убедитесь, что у вас установлена библиотека `axios`. Если её нет, установите с помощью:
```bash
npm install axios
```
3. **Типы Axios:** Если вам нужно, вы также можете расширить ваши типы Axios, добавив дополнительные настройки для заголовков или параметров.
Теперь у вас есть API-прокси, реализованный с использованием TypeScript в Next.js 15 с App Router. Вы можете добавлять более сложные типы и логику в зависимости от потребностей вашего приложения.