import {
GetStaticPaths,
GetStaticProps,
GetStaticPropsContext,
NextPage,
} from "next";
import axios, { AxiosResponse } from "axios";
import { ParsedUrlQuery } from "querystring";
import { useRouter } from "next/router";
interface Geo {
lat: string;
lng: string;
}
interface Address {
street: string;
suite: string;
city: string;
zipcode: string;
geo: Geo;
}
interface Company {
name: string;
catchPhrase: string;
bs: string;
}
interface IUser {
id: number;
name: string;
username: string;
email: string;
address: Address;
phone: string;
website: string;
company: Company;
}
interface IProps {
user?: IUser;
error?: string;
}
function UserDetailPage({ user }: IProps) {
const router = useRouter();
// Если страница еще не сгенерирована, будет отображаться это
// До тех пор, пока `getStaticProps` не закончит свою работу
if (router.isFallback) {
return <div>Загрузка...</div>;
}
// рендеринг поста
if (!user) return <div>Загрузка...</div>;
return (
<div>
<div>Имя: {user.name}</div>
<div>Город: {user.address.city}</div>
</div>
);
}
interface IPaths extends ParsedUrlQuery {
id: string;
}
export const getStaticPaths: GetStaticPaths<IPaths> = async () => {
const { data }: AxiosResponse<IUser[]> = await axios.get(
"https://jsonplaceholder.typicode.com/users",
);
const paths = data.map((item) => ({
params: {
id: String(item.id),
},
}));
return {
paths,
fallback: true,
};
};
export const getStaticProps: GetStaticProps<IProps> = async (
context: GetStaticPropsContext,
) => {
try {
const id = context.params?.id;
if (!id) {
throw new Error("Не удалось получить id пользователя.");
}
const response: AxiosResponse<IUser> = await axios.get(
`https://jsonplaceholder.typicode.com/users/${id}?_delay=3000`,
);
const user = response.data;
return {
props: {
user: user,
},
};
} catch (error) {
return {
props: {
error: "Неизвестная ошибка",
},
revalidate: 1,
};
}
};
export default UserDetailPage;