49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { GetStaticProps } from "next";
|
|
import GreetingJSON from "./hello-world.json";
|
|
import { fetchExample } from "utils/api";
|
|
|
|
interface Props {
|
|
greeting: string;
|
|
}
|
|
|
|
export const getStaticProps: GetStaticProps<Props> = async () => {
|
|
return {
|
|
props: { greeting: GreetingJSON.greeting }, // will be passed to the page component as props
|
|
// Next.js will attempt to re-generate the page:
|
|
// - When a request comes in
|
|
// - At most once every second
|
|
revalidate: 1,
|
|
};
|
|
};
|
|
|
|
function HelloWorld({ greeting }: Props): JSX.Element {
|
|
const [greetings, setGreetings] = React.useState([greeting]);
|
|
|
|
const getMoreGreetings = async () => {
|
|
const greetingFromBackend = await fetchExample();
|
|
setGreetings([
|
|
...greetings,
|
|
`"${greetingFromBackend}" --- ${new Date().toISOString()}`,
|
|
]);
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: "50px" }}>
|
|
<button
|
|
style={{ border: "2px solid black", padding: "5px" }}
|
|
onClick={getMoreGreetings}
|
|
>
|
|
Get greeting from the server
|
|
</button>
|
|
<ol style={{ listStyleType: "decimal" }}>
|
|
{greetings.map((greeting) => (
|
|
<li key={greeting}>{greeting}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HelloWorld;
|