Запрос со страницы в NextJS

Серверный компонент может читать данные напрямую из модуля, но интерактивная страница часто подгружает JSON после открытия. Для этого нужен клиентский файл с 'use client' и fetch на адрес вашего route.js.

Давайте отдадим список из api/users/route.js и покажем имена на странице users/page.jsx:

import { users } from '../../users/data';

export async function GET() {
	return Response.json(users);
}

'use client';

import { useEffect, useState } from 'react';

export default function UsersPage() {
	let [names, setNames] = useState([]);
	
	useEffect(function () {
		let load = async function () {
			let response = await fetch('/api/users');
			let data = await response.json();
			setNames(data.map(function (user) {
				return user.name;
			}));
		};
		
		load();
	}, []);
	
	return (
		<ul>
			{names.map(function (name, index) {
				return <li key={index}>{name}</li>;
			})}
		</ul>
	);
}

Выведите на клиентской странице названия городов из вашего API по тому же принципу, что и имена в примере.

/src/
- /app/
  - /api/
    - /users/
      - route.js
  - /users/
    - data.js
    - page.jsx