Build a Next.js Interactive Web-Based Weather App

Written by

javascriptdebugged

in

In today’s fast-paced world, having quick access to weather information is more crucial than ever. From planning your day to making travel decisions, knowing the weather can significantly impact your choices. This tutorial will guide you through building a dynamic, interactive weather application using Next.js, a powerful React framework, and the OpenWeatherMap API. This project is perfect for beginners and intermediate developers looking to expand their skills in front-end development, API integration, and user interface design. By the end of this tutorial, you’ll have a fully functional weather app that displays real-time weather data for any city you choose.

Why Build a Weather App?

Building a weather app is an excellent learning experience for several reasons:

  • API Integration: You’ll learn how to fetch data from an external API, a fundamental skill for web development.
  • State Management: You’ll practice managing application state, essential for building dynamic and responsive user interfaces.
  • User Interface (UI) Design: You’ll have the opportunity to design a clean and intuitive UI, enhancing your front-end development skills.
  • Real-World Application: You’ll create a useful application that you can use daily and showcase in your portfolio.

This tutorial will cover everything from setting up your Next.js project to displaying weather data, handling user input, and styling the application. Let’s get started!

Prerequisites

Before you begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for running JavaScript and managing project dependencies.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will help you understand the code.
  • A code editor (e.g., VS Code, Sublime Text): This is where you’ll write your code.
  • An OpenWeatherMap API key: You’ll need to sign up for a free account at OpenWeatherMap to get an API key.

Setting Up Your Next.js Project

First, create a new Next.js project. Open your terminal and run the following command:

npx create-next-app weather-app
cd weather-app

This command creates a new Next.js project named “weather-app” and navigates you into the project directory. Next, install any necessary dependencies. For this project, we’ll primarily use the “axios” library to make API requests.

npm install axios

Now, let’s start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to see the default Next.js welcome page. You’re now ready to start building your weather app!

Fetching Weather Data from the API

The core of our application is fetching weather data from the OpenWeatherMap API. We’ll create a function to handle this. First, create a new file called `api.js` inside a `utils` folder in your project’s root directory. The directory structure should look like this:

weather-app/
├── pages/
│   └── _app.js
│   └── index.js
├── utils/
│   └── api.js
├── public/
├── package.json
└── ...

In `utils/api.js`, add the following code:

import axios from 'axios';

const API_KEY = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

export const fetchWeatherData = async (city) => {
  try {
    const response = await axios.get(BASE_URL, {
      params: {
        q: city,
        appid: API_KEY,
        units: 'metric', // Use metric units (Celsius)
      },
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching weather data:', error);
    return null;
  }
};

Replace `YOUR_API_KEY` with your actual OpenWeatherMap API key. This function uses the `axios` library to make a GET request to the OpenWeatherMap API. The `units: ‘metric’` parameter ensures that the temperature is displayed in Celsius.

Building the User Interface (UI)

Now, let’s create the UI for our weather app. Open `pages/index.js` and replace the existing code with the following:

import { useState } from 'react';
import { fetchWeatherData } from '../utils/api';

export default function Home() {
  const [city, setCity] = useState('');
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(null);

  const handleInputChange = (event) => {
    setCity(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    setError(null);
    setWeatherData(null); // Clear previous data

    if (city.trim() === '') {
      setError('Please enter a city.');
      return;
    }

    const data = await fetchWeatherData(city);

    if (data) {
      setWeatherData(data);
    } else {
      setError('City not found or an error occurred.');
    }
  };

  return (
    <div className="container">
      <h1>Weather App</h1>
      <form onSubmit={handleSubmit} className="search-form">
        <input
          type="text"
          placeholder="Enter city"
          value={city}
          onChange={handleInputChange}
          className="search-input"
        />
        <button type="submit" className="search-button">Search</button>
      </form>

      {error && <p className="error-message">{error}</p>}

      {weatherData && (
        <div className="weather-info">
          <h2>{weatherData.name}, {weatherData.sys.country}</h2>
          <p>Temperature: {weatherData.main.temp} °C</p>
          <p>Weather: {weatherData.weather[0].description}</p>
          <p>Humidity: {weatherData.main.humidity}%</p>
          <p>Wind Speed: {weatherData.wind.speed} m/s</p>
          <img src={`http://openweathermap.org/img/w/${weatherData.weather[0].icon}.png`} alt="Weather Icon" />
        </div>
      )}
    </div>
  );
}

This code defines the main component of our app. It includes:

  • State variables: `city` (for the input), `weatherData` (to store the API response), and `error` (for error messages).
  • Input field and form: Allows the user to enter a city and submit the search.
  • Event handlers: `handleInputChange` updates the `city` state, and `handleSubmit` fetches weather data.
  • Conditional rendering: Displays weather information if `weatherData` is available, otherwise displays an error message.

Styling the Application with CSS

To make our app look good, let’s add some basic CSS. Create a file called `styles/Home.module.css` and add the following code:


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 20px;
  font-size: 2.5em;
}

.search-form {
  display: flex;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  margin-right: 10px;
}

.search-button {
  padding: 10px 20px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
}

.search-button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-bottom: 10px;
}

.weather-info {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.weather-info h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.weather-info p {
  margin-bottom: 5px;
}

Import this CSS file into `pages/index.js` by adding the following line at the top of the file:

import styles from '../styles/Home.module.css';

And apply the styles to the corresponding elements in your JSX, for example:


<div className={styles.container}>
  <h1>Weather App</h1>
  <form onSubmit={handleSubmit} className={styles.searchForm}>
    <input
      type="text"
      placeholder="Enter city"
      value={city}
      onChange={handleInputChange}
      className={styles.searchInput}
    />
    <button type="submit" className={styles.searchButton}>Search</button>
  </form>

  {error && <p className={styles.errorMessage}>{error}</p>}

  {weatherData && (
    <div className={styles.weatherInfo}>
      <h2>{weatherData.name}, {weatherData.sys.country}</h2>
      <p>Temperature: {weatherData.main.temp} °C</p>
      <p>Weather: {weatherData.weather[0].description}</p>
      <p>Humidity: {weatherData.main.humidity}%</p>
      <p>Wind Speed: {weatherData.wind.speed} m/s</p>
      <img src={`http://openweathermap.org/img/w/${weatherData.weather[0].icon}.png`} alt="Weather Icon" />
    </div>
  )}
</div>

This CSS provides basic styling for the app, including the layout, input field, button, and weather information display. Feel free to customize the styles to your liking.

Handling Errors and Edge Cases

It’s important to handle errors gracefully. The `fetchWeatherData` function in `utils/api.js` already includes basic error handling, but we can enhance it in our `pages/index.js` component.

The code already includes an `error` state variable to display error messages to the user. The `handleSubmit` function checks if the city input is empty and displays an error message if it is. If the API call fails, the `fetchWeatherData` function will return `null`, and the app will display the “City not found or an error occurred.” message.

Consider adding more robust error handling, such as:

  • Displaying different error messages based on the type of error. For example, you could show a “Network error” message if the API call fails due to a network issue.
  • Implementing a loading state. Display a loading indicator while the API call is in progress.
  • Adding input validation. Ensure that the user enters a valid city name.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect API Key: Make sure you have the correct API key from OpenWeatherMap. Double-check for typos.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the API request. This can happen if your development server and the API server are on different domains. For local development, you might need to configure CORS on your Next.js server or use a proxy. This is usually not an issue in production.
  • Missing Dependencies: Ensure that you have installed all the required dependencies (e.g., `axios`). Run `npm install` in your project directory if you’re missing any.
  • Incorrect API Endpoint: Verify that you are using the correct API endpoint and that the parameters are formatted correctly.
  • State Management Issues: Make sure you are correctly updating the state variables (`city`, `weatherData`, `error`) and that your UI re-renders when the state changes. Use `console.log` statements to debug the state.

Enhancements and Next Steps

Once you have a working weather app, you can add several enhancements:

  • Add a loading indicator: Show a loading spinner while fetching data from the API.
  • Implement location search suggestions: Use an autocomplete library to suggest city names as the user types.
  • Add more weather details: Display additional information, such as the minimum and maximum temperatures, pressure, and sunrise/sunset times.
  • Implement a dark/light mode: Allow users to switch between light and dark themes.
  • Add a favorites feature: Allow users to save their favorite cities.
  • Improve UI/UX: Refine the styling and user experience to make the app more visually appealing and user-friendly. Consider using a UI library like Material UI or Ant Design.
  • Implement error boundaries: Use error boundaries to gracefully handle errors that occur during rendering.
  • Deploy your app: Deploy your app to a platform like Vercel or Netlify to share it with the world.

Summary / Key Takeaways

In this tutorial, you’ve learned how to build a weather app using Next.js and the OpenWeatherMap API. You’ve covered setting up a Next.js project, fetching data from an API, building a user interface, styling your application, and handling errors. You’ve also learned about common mistakes and how to avoid them, along with potential enhancements to make your app even better. This project provides a solid foundation for understanding API integration, state management, and front-end development principles. By following this tutorial, you’ve gained practical experience that you can apply to other web development projects.

FAQ

Q: How do I get an API key for OpenWeatherMap?

A: You can sign up for a free account at OpenWeatherMap and generate an API key from your account dashboard.

Q: What is the purpose of the `units=metric` parameter in the API request?

A: The `units=metric` parameter specifies that you want the temperature to be displayed in Celsius. Without this parameter, the temperature would be displayed in Kelvin.

Q: How can I handle CORS errors?

A: CORS (Cross-Origin Resource Sharing) errors can occur during development. While there are several ways to handle CORS issues, the best method for a Next.js project is to use a proxy. You can set up a proxy in your `next.config.js` file to forward requests to the OpenWeatherMap API. This configuration will allow your local development server to make requests to the API without encountering CORS issues.

Q: How can I deploy my weather app?

A: You can deploy your Next.js app to platforms like Vercel or Netlify. These platforms provide easy deployment and hosting for web applications.

The journey of building this weather app is a microcosm of the larger world of web development. From the initial setup to the final deployment, each step presents an opportunity to learn and grow. Remember that debugging and problem-solving are integral parts of the process, and don’t be afraid to experiment and try new things. The skills you’ve acquired in this project, from API interaction to UI design, will serve you well in all your future endeavors. Keep building, keep learning, and enjoy the process of bringing your ideas to life.

More posts