Openweather Api
Typescript
Web Development
Weather App

Creating Weather Applications with Next.js and OpenWeather API

Introduction

@rnab

2 min readAug 20, 2025

Weather applications have become essential tools for users to plan their day effectively. With the rise of modern web development frameworks, creating such applications has become more accessible and efficient. In this article, we will explore how to build a weather application using Next.js, a powerful React framework for building server-rendered applications, and the OpenWeather API, a reliable service that provides comprehensive weather data. By the end of this guide, you’ll have a functional weather app that fetches and displays real-time weather information.

Setting up the Next.js Project

First, let’s set up a basic Next.js application. If you haven’t already, make sure you have Node.js and npm installed.

npx create-next-app@latest weather-app
cd weather-app

This command creates a new Next.js project named weather-app. Once set up, navigate into the project directory.

Integrating the OpenWeather API

To fetch weather data, we need to integrate the OpenWeather API. Begin by signing up at OpenWeather to get your API key, which is necessary for making requests.

Installing Axios

We’ll use Axios to make HTTP requests to the OpenWeather API.

npm install axios

Fetching Weather Data

Now, let’s write a function to fetch weather data. Create a new file called fetchWeather.ts in the utils folder (create the folder if it doesn't exist):

// utils/fetchWeather.ts
import axios from 'axios';

const API_KEY = 'your_api_key_here';
const BASE_URL = 'http://api.openweathermap.org/data/2.5/weather';

export async function fetchWeather(city: string) {
  try {
    const response = await axios.get(`${BASE_URL}?q=${city}&appid=${API_KEY}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching weather data:', error);
  }
}

Make sure to replace 'your_api_key_here' with your actual OpenWeather API key.

Displaying Weather Data in Next.js

Let’s create a page to display the weather information. Open or create the index.tsx file in the pages directory:

// pages/index.tsx
import { useState } from 'react';
import { fetchWeather } from '../utils/fetchWeather';

export default function Home() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);

  const searchCityWeather = async () => {
    const data = await fetchWeather(city);
    setWeather(data);
  };

  return (
    <div>
      <h1>Weather App</h1>
      <input 
        type="text" 
        value={city} 
        onChange={(e) => setCity(e.target.value)} 
        placeholder="Enter city name" 
      />
      <button onClick={searchCityWeather}>Search</button>
      {weather && (
        <div>
          <h2>{weather.name}</h2>
          <p>{Math.round(weather.main.temp - 273.15)}°C</p> {/* Convert Kelvin to Celsius */}
          <p>{weather.weather[0].description}</p>
        </div>
      )}
    </div>
  );
}

In this code, a simple form allows users to enter a city name. When they click the “Search” button, the app fetches and displays the city’s current temperature and weather description.

Conclusion

You’ve now completed a basic weather application using Next.js and the OpenWeather API. This app provides a foundation you can expand upon by adding features such as weather forecasts, location-based searches, or styling with CSS frameworks. The combination of Next.js and OpenWeather API offers a flexible and scalable approach to creating weather-centric applications. Stay curious and keep experimenting with features to enhance the functionality and user experience of your app.