nextjs isr page that recalibrated every 45 seconds. the page should fetch the latest weather for a zip code. in typescript

index.ts
npm install axios next
npm install --save-dev typescript
57 chars
3 lines

import { GetStaticProps } from 'next';
import axios from 'axios';

type WeatherData = {
  temperature: number;
  description: string;
};

type WeatherProps = {
  zipCode: string;
  weatherData: WeatherData;
};

const SECONDS_IN_MINUTE = 60;
const REVALIDATION_INTERVAL = 45;

const Weather = ({ zipCode, weatherData }: WeatherProps) => {
  const { temperature, description } = weatherData;

  return (
    <div>
      <h1>Weather for {zipCode}</h1>

      <p>Temperature: {temperature} &deg;C</p>

      <p>Description: {description}</p>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const zipCode = '12345'; // Replace with actual zip code
  const apiKey = 'abc123'; // Replace with actual API key

  const url = `https://api.openweathermap.org/data/2.5/weather?zip=${zipCode}&appid=${apiKey}&units=metric`;

  const { data } = await axios.get(url);

  const weatherData: WeatherData = {
    temperature: data.main.temp,
    description: data.weather[0].description,
  };

  return {
    props: {
      zipCode,
      weatherData,
    },
    revalidate: REVALIDATION_INTERVAL * SECONDS_IN_MINUTE, // Recalibrate every 45 seconds
  };
};

export default Weather;
1199 chars
54 lines

index.ts
npm run dev
12 chars
2 lines