Build a Simple Next.js Interactive Weather App

Written by

javascriptdebugged

in

In today’s fast-paced world, accessing real-time information is crucial. Weather updates are no exception. Imagine a sleek, responsive weather application that you can build from scratch using Next.js. This tutorial will guide you through creating an interactive weather app, providing users with current weather conditions for any city they choose. We’ll leverage the power of Next.js for its performance and SEO benefits, along with a free weather API to fetch real-time data. This project is ideal for both beginners and intermediate developers looking to expand their skills in modern web development.

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 and display data from an external API, a fundamental skill in modern web development.
  • State Management: You’ll manage and update the app’s state, crucial for dynamic user interfaces.
  • User Interface (UI) Design: You’ll practice designing a user-friendly interface that provides a great user experience.
  • Performance Optimization: You’ll gain experience in optimizing a web application for speed and efficiency.

Furthermore, this project provides a tangible outcome – a functional weather app you can use daily and showcase in your portfolio.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for running Next.js.
  • A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.
  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code.
  • An API key from a weather API provider: We’ll use OpenWeatherMap (free tier available).

Let’s get started!

Step-by-Step Guide

1. Setting Up Your Next.js Project

First, create a new Next.js project using the following command in your terminal:

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

This command creates a new directory called weather-app and initializes a Next.js project inside it. Navigate into the project directory using cd weather-app.

2. Installing Dependencies

For this project, we’ll need to install a few dependencies. Open your terminal in the project directory and run:

npm install axios react-icons
  • axios: This library helps us make HTTP requests to the weather API.
  • react-icons: This library provides a wide range of icons to enhance our UI.

3. API Key and Environment Variables

To use the OpenWeatherMap API, you’ll need an API key. Sign up for a free account at OpenWeatherMap and generate an API key.

It’s crucial to store your API key securely and avoid hardcoding it in your code. We’ll use environment variables for this. Create a file named .env.local in the root directory of your project (same level as package.json) and add the following line, replacing YOUR_API_KEY with your actual API key:

NEXT_PUBLIC_WEATHER_API_KEY=YOUR_API_KEY

Note: Using NEXT_PUBLIC_ prefix makes the variable accessible in the browser.

4. Creating the Weather Component

Let’s create a new component to handle fetching and displaying weather data. Create a new file named components/Weather.js and add the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { FaCloudSun, FaCloudRain, FaSun, FaSnowflake, FaCloud } from 'react-icons/fa'; // Import icons

const Weather = ({ city }) => {
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchWeatherData = async () => {
      setLoading(true);
      setError(null);

      try {
        const apiKey = process.env.NEXT_PUBLIC_WEATHER_API_KEY;
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
        const response = await axios.get(apiUrl);
        setWeatherData(response.data);
      } catch (err) {
        setError(err.message || 'An error occurred while fetching weather data.');
      } finally {
        setLoading(false);
      }
    };

    if (city) {
      fetchWeatherData();
    }
  }, [city]);

  // Function to determine weather icon
  const getWeatherIcon = (weatherCondition) => {
    switch (weatherCondition) {
      case 'Clouds':
        return ; // Cloud icon
      case 'Rain':
        return ; // Rain icon
      case 'Clear':
        return ; // Sun icon
      case 'Snow':
        return ; // Snow icon
      case 'Drizzle':
        return ; // Rain icon
      case 'Thunderstorm':
        return ; // Rain icon
      default:
        return ; // Default: Cloud with sun
    }
  };

  if (loading) {
    return <p>Loading weather data...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (!weatherData) {
    return null; // Or some placeholder
  }

  return (
    <div>
      <h2>Weather in {weatherData.name}</h2>
      <div>{getWeatherIcon(weatherData.weather[0].main)}</div>
      <p>Temperature: {weatherData.main.temp}°C</p>
      <p>Condition: {weatherData.weather[0].main}</p>
      <p>Humidity: {weatherData.main.humidity}%</p>
    </div>
  );
};

export default Weather;

This component does the following:

  • Imports necessary modules: React, useState, useEffect, axios, and icons from react-icons.
  • Defines state variables: weatherData to store the weather data, loading to indicate data fetching, and error to handle errors.
  • Uses useEffect hook: To fetch weather data when the component mounts or the city prop changes.
  • Fetches data from the OpenWeatherMap API: Uses axios to make a GET request to the API.
  • Handles loading and error states: Displays loading messages or error messages accordingly.
  • Displays weather information: Renders the city name, temperature, condition, and humidity.
  • Includes a getWeatherIcon function: This function returns an appropriate icon based on the weather condition.

5. Styling the Weather Component

Create a file named styles/Weather.module.css and add the following CSS styles:

.weather-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  text-align: center;
  background-color: #f9f9f9;
}

.weather-icon {
  font-size: 3em;
  margin-bottom: 10px;
}

These styles provide basic styling for the weather container, including a border, padding, and text alignment.

6. Implementing the Search Component

Create a new component to handle user input for the city. Create a file named components/Search.js and add the following code:

import React, { useState } from 'react';

const Search = ({ onSearch }) => {
  const [city, setCity] = useState('');

  const handleChange = (e) => {
    setCity(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(city);
  };

  return (
    
      
      <button type="submit">Search</button>
    
  );
};

export default Search;

This component:

  • Manages user input: Uses a state variable city to store the input value.
  • Handles input changes: Updates the city state when the user types in the input field.
  • Submits the form: Calls the onSearch prop function with the city name when the form is submitted.

7. Styling the Search Component

Create a file named styles/Search.module.css and add the following CSS styles:

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

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

.search-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

These styles provide styling for the search form, including the input field and the search button.

8. Integrating Components in the pages/index.js File

Now, let’s put it all together in the main page (pages/index.js). Replace the content of pages/index.js with the following code:

import React, { useState } from 'react';
import Weather from '../components/Weather';
import Search from '../components/Search';
import styles from '../styles/Home.module.css'; // Import global styles

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

  const handleSearch = (city) => {
    setCity(city);
  };

  return (
    <div>
      <main>
        <h1>Weather App</h1>
        <Search />
        {city && }
      </main>
    </div>
  );
}

This page:

  • Imports the Weather and Search components.
  • Manages the city state to be passed into the Weather component.
  • Renders the Search component and the Weather component.

9. Styling the Main Page

Modify the styles in styles/Home.module.css to fit your design. Here is an example:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%; /* Adjust width as needed */
  max-width: 600px; /* Maximum width */
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 30px;
}

10. Running Your Application

To run your application, execute the following command in your terminal:

npm run dev

This command starts the development server, and you can view your weather app by opening http://localhost:3000 in your browser. Enter a city name in the search box to view the weather information.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • API Key Issues:
    • Error: “Invalid API key” or “Unauthorized”.
    • Solution: Double-check your API key in the .env.local file and ensure it is correct. Also, verify that you have enabled the necessary API features in your OpenWeatherMap account.
  • CORS Errors:
    • Error: “CORS error” when fetching data.
    • Solution: The OpenWeatherMap API allows cross-origin requests. However, if you’re experiencing CORS errors, ensure your development environment is correctly configured, or consider using a proxy server during development.
  • Incorrect City Name:
    • Error: No weather data displayed.
    • Solution: Ensure you are entering a valid city name. The API might not recognize misspelled city names. Try a different city if you suspect an issue.
  • Typographical Errors:
    • Error: Application not working as expected.
    • Solution: Carefully check your code for any typos, especially in component names, prop names, and API endpoint URLs. Use your browser’s developer tools (Console tab) to identify and debug errors.

SEO Best Practices

To optimize your weather app for search engines, consider the following SEO best practices:

  • Use descriptive page titles: Make sure your page title is clear and includes relevant keywords (e.g., “Weather App – [City Name]”).
  • Write compelling meta descriptions: Provide a concise summary of the page content.
  • Optimize images: Use descriptive filenames and alt text for images.
  • Use semantic HTML: Use appropriate HTML tags (e.g., <h1>, <h2>, <p>) to structure your content.
  • Ensure mobile-friendliness: Make your app responsive to provide a good user experience on all devices.
  • Improve page speed: Optimize images, leverage browser caching, and use code splitting to improve page load times.
  • Create high-quality content: Provide informative and valuable content to attract users and improve search engine rankings.

Key Takeaways and Summary

In this tutorial, we’ve built a functional weather application using Next.js, incorporating API integration, state management, and a user-friendly interface. You’ve learned how to fetch data from an external API, display it dynamically, handle user input, and manage loading and error states. We’ve also touched on styling and SEO best practices to help you create a polished and search-engine-friendly application.

FAQ

  1. Can I use a different weather API?

    Yes, you can. Simply replace the API endpoint and adjust the data parsing logic in the Weather.js component to match the API you choose.

  2. How can I add more features to my weather app?

    You can add features like hourly forecasts, a map view, a multi-day forecast, or the ability to save favorite cities. You’ll need to update the API calls and UI components accordingly.

  3. How can I deploy this app?

    You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. These platforms provide easy deployment and hosting options.

  4. How do I handle different weather conditions with icons?

    We used a getWeatherIcon function that maps weather conditions (e.g., “Clouds”, “Rain”, “Clear”) to corresponding icons. You can extend this function to support more weather conditions and use different icons.

This weather app is a solid foundation for any developer to build upon, offering a practical introduction to the world of web development. As you continue to experiment with the code, you’ll find yourself not only improving your skills but also gaining a deeper understanding of how modern web applications are built. The knowledge you have gained can be applied to many other projects, helping you to create more complex and dynamic web applications. Embrace the challenge, and enjoy the journey of learning and creating!

More posts