Build a Simple Weather App with Next.js: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital world, users expect instant access to information. Weather updates are a prime example. Gone are the days of checking the TV news or squinting at a newspaper. Now, people want real-time weather data at their fingertips, accessible on any device. This demand has fueled the rise of weather applications, and in this tutorial, we’ll build a simple yet functional weather app using Next.js, a powerful React framework.

Why Build a Weather App?

Creating a weather app is an excellent project for several reasons:

  • Practicality: Weather information is universally useful. You’ll build something you can actually use!
  • API Integration: You’ll learn how to fetch data from external APIs, a crucial skill for any web developer.
  • Frontend Fundamentals: You’ll solidify your understanding of React components, state management, and user interface design.
  • Next.js Mastery: You’ll get hands-on experience with Next.js features like server-side rendering (SSR), static site generation (SSG), and API routes.

This project is perfect for beginners and intermediate developers looking to expand their skill set and create a real-world application. We’ll break down the process into manageable steps, explaining each concept in clear, concise language.

Prerequisites

Before we begin, you’ll need the following:

  • Node.js and npm (or yarn): Make sure you have Node.js and npm (or yarn) installed on your system. You can download them from the official Node.js website.
  • A Code Editor: A code editor like Visual Studio Code (VS Code), Sublime Text, or Atom is recommended.
  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages is essential.
  • API Key (for the Weather API): We’ll use a free weather API. You’ll need to sign up for an API key. We recommend OpenWeatherMap (https://openweathermap.org/api). It’s free and easy to use.

Step-by-Step Guide

1. Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app weather-app

This command will create a new directory called `weather-app` with the basic structure of a Next.js project. Navigate into the project directory:

cd weather-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

2. Project Structure and File Organization

Let’s take a quick look at the project structure:

  • `pages/`: This directory contains your application’s pages. Each file in this directory represents a route. For example, `pages/index.js` is the home page (/).
  • `public/`: This directory holds static assets like images, fonts, and other files.
  • `styles/`: This directory contains your CSS files.
  • `package.json`: This file contains your project’s dependencies and scripts.

We’ll primarily be working within the `pages/` directory for this project.

3. Creating the Home Page (index.js)

Open `pages/index.js`. This is where we’ll build the main UI of our weather app. Replace the default content with the following:


import { useState } from 'react';

function HomePage() {
  const [city, setCity] = useState('');
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key

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

    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
      );
      const data = await response.json();

      if (data.cod === 200) {
        setWeatherData(data);
      } else {
        setError(data.message || 'City not found');
      }
    } catch (err) {
      setError('An error occurred while fetching weather data.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <h1>Weather App</h1>
      <div className="search-container">
        <input
          type="text"
          placeholder="Enter city"
          value={city}
          onChange={(e) => setCity(e.target.value)}
        />
        <button onClick={fetchWeatherData} disabled={loading}>
          {loading ? 'Searching...' : 'Search'}
        </button>
      </div>
      {error && <p className="error">{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>
        </div>
      )}
    </div>
  );
}

export default HomePage;

Important: Replace `YOUR_API_KEY` with your actual API key from OpenWeatherMap. Don’t commit your API key to a public repository. Consider using environment variables in a real-world application.

Let’s break down this code:

  • Importing `useState`: We import the `useState` hook from React to manage the component’s state.
  • State Variables: We declare several state variables:
    • `city`: Stores the city name entered by the user.
    • `weatherData`: Stores the weather data fetched from the API. Initially `null`.
    • `loading`: A boolean indicating whether data is being fetched.
    • `error`: Stores any error messages.
  • `fetchWeatherData` Function: This asynchronous function is responsible for fetching weather data.
    • It sets `loading` to `true` before the API call to indicate that data is being fetched.
    • It constructs the API URL using the city name and your API key.
    • It uses the `fetch` API to make a request to the OpenWeatherMap API.
    • It parses the response as JSON.
    • If the API call is successful (status code 200), it updates the `weatherData` state with the fetched data.
    • If there’s an error (e.g., city not found), it sets the `error` state.
    • It sets `loading` to `false` in the `finally` block, regardless of success or failure.
  • JSX Structure: The `return` statement renders the UI.
    • A container `div` with a heading.
    • A search input field and a search button.
    • Conditionally renders an error message if the `error` state is not null.
    • Conditionally renders the weather information if `weatherData` is not null.

4. Styling with CSS Modules

Let’s add some basic styling to make our app look better. Create a file named `styles/Home.module.css` (or any name that makes sense to you) and add the following CSS:


.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
  text-align: center;
}

.search-container {
  margin-bottom: 20px;
}

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

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

.search-container button:hover {
  background-color: #3e8e41;
}

.weather-info {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
}

.error {
  color: red;
  margin-top: 20px;
}

Now, import this CSS module into your `pages/index.js` file and apply the styles:


import styles from '../styles/Home.module.css';
import { useState } from 'react';

function HomePage() {
  // ... (rest of the code)

  return (
    <div className={styles.container}>
      <h1>Weather App</h1>
      <div className={styles['search-container']}>
        <input
          type="text"
          placeholder="Enter city"
          value={city}
          onChange={(e) => setCity(e.target.value)}
        />
        <button onClick={fetchWeatherData} disabled={loading}>
          {loading ? 'Searching...' : 'Search'}
        </button>
      </div>
      {error && <p className={styles.error}>{error}</p>}
      {weatherData && (
        <div className={styles['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>
        </div>
      )}
    </div>
  );
}

export default HomePage;

Notice how we import the CSS module using `import styles from ‘../styles/Home.module.css’;`. We then use `styles.container`, `styles[‘search-container’]`, etc., to apply the styles to the corresponding elements. Also note the usage of `styles[‘search-container’]` when you have a hyphen in your class name.

5. Error Handling and Loading States

We’ve already implemented basic error handling and loading states in our code. Let’s recap:

  • Loading State: The `loading` state is set to `true` when the `fetchWeatherData` function is called and set to `false` when the API call completes (either successfully or with an error). The search button is disabled while loading.
  • Error Handling: The `error` state is used to display error messages to the user. If the API returns an error, we display a user-friendly message.

These are crucial aspects of a good user experience, providing feedback to the user and handling potential issues gracefully.

6. Adding a Background Image (Optional)

Let’s add a background image to make our app more visually appealing. You can use a free image from a site like Unsplash or Pexels. Place the image in your `public/` directory (e.g., `public/weather-background.jpg`). Then, add the following CSS to your `styles/Home.module.css`:


.container {
  /* ... existing styles ... */
  background-image: url('/weather-background.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh; /* Ensure the background covers the entire viewport */
  color: white; /* Make text readable against the background */
}

Remember to adjust the image path if your image file is in a different location.

7. Deploying Your Weather App

Once you’re satisfied with your app, it’s time to deploy it. Next.js makes deployment incredibly easy, especially with Vercel, the platform created by the Next.js team. Here’s how to deploy to Vercel:

  1. Create a Vercel Account: If you don’t already have one, sign up for a free Vercel account at https://vercel.com/.
  2. Connect Your GitHub Repository: Vercel integrates seamlessly with GitHub. Create a new repository on GitHub for your `weather-app` project. Push your code to this repository.
  3. Import Your Project in Vercel: In your Vercel dashboard, click “Import Project.” Select your GitHub repository.
  4. Configure Deployment (If Necessary): Vercel will automatically detect that it’s a Next.js project. You might need to configure environment variables (like your API key) during the deployment process. You can add these in the Vercel dashboard under your project settings.
  5. Deploy: Click “Deploy.” Vercel will build and deploy your application.
  6. Access Your Live App: Once the deployment is complete, Vercel will provide you with a unique URL where your weather app is live!

That’s it! Your weather app is now live and accessible to anyone with the URL.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Forgetting to Replace Your API Key: The most common mistake is forgetting to replace `YOUR_API_KEY` with your actual API key. Make sure you do this!
  • Incorrect API URL: Double-check the API URL you are using. Make sure it’s correct and matches the OpenWeatherMap API documentation.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API is not allowing requests from your domain. This is less common with free APIs, but if it happens, you might need to configure CORS settings on your API or use a proxy server. Vercel automatically handles CORS issues for you in most cases.
  • Incorrect State Updates: Ensure you are updating your state variables correctly using the `set…` functions (e.g., `setCity`, `setWeatherData`, `setLoading`, `setError`).
  • Not Handling Errors: Always include error handling in your API calls to provide a good user experience. Display informative error messages to the user.
  • Not Using CSS Modules Correctly: Make sure you are importing the CSS module correctly and applying the styles using the correct syntax (e.g., `styles.container`). Remember that hyphens in your class names need to be accessed using bracket notation: `styles[‘class-name’]`.

SEO Best Practices

While this is a simple app, let’s touch upon SEO best practices:

  • Descriptive Title Tag: In the `<head>` section of your `pages/_document.js` or `pages/_app.js` file (if you have one), ensure your title tag accurately describes your app. For example: `<title>Weather App – Get Real-Time Weather Updates</title>`. Keep the title concise (under 60 characters is ideal).
  • Meta Description: Add a meta description tag to provide a brief summary of your app. This is what search engines display below your title in search results. For example: `<meta name=”description” content=”Get instant weather updates for any city. Built with Next.js.” />`. Keep the meta description under 160 characters.
  • Use Semantic HTML: Use semantic HTML elements like `<h1>`, `<h2>`, `<p>`, `<nav>`, `<article>`, etc. This helps search engines understand the structure of your content.
  • Keyword Optimization: Naturally incorporate relevant keywords like “weather,” “weather app,” “Next.js,” and the names of cities into your content. Avoid keyword stuffing.
  • Image Alt Text: If you use images, always provide descriptive `alt` text.
  • Mobile-First Design: Ensure your app is responsive and works well on all devices.
  • Fast Loading Speed: Optimize your images, use code splitting, and leverage Next.js’s features like static site generation and server-side rendering to improve loading times.

Key Takeaways

  • You’ve learned how to create a basic weather app using Next.js.
  • You’ve gained experience with API integration, state management, and UI design.
  • You’ve understood how to handle loading states and errors.
  • You’ve learned the basics of deployment with Vercel.
  • You’ve been introduced to SEO best practices for your Next.js application.

Optional FAQ

Q: How can I get an API key for the weather API?

A: You can obtain a free API key from OpenWeatherMap. Visit their website (https://openweathermap.org/api) and sign up for a free account. After signing up, you will find your API key in your account dashboard.

Q: What if the city I enter isn’t found?

A: The app is designed to display an error message if the city is not found. This is handled in the `fetchWeatherData` function. Double-check the city name for typos and ensure you have an active internet connection.

Q: Can I customize the appearance of the app?

A: Absolutely! The app’s appearance is controlled by the CSS. You can modify the CSS in `styles/Home.module.css` to change the colors, fonts, layout, and overall design to your liking.

Q: How do I deploy the app to a different platform?

A: While Vercel is the easiest option for Next.js, you can deploy your app to other platforms like Netlify, AWS, or Google Cloud. The deployment process may vary depending on the platform, but the core Next.js code will remain the same. Each platform will have its own instructions for deploying a Next.js application.

Q: How can I improve this app further?

A: There are many ways to enhance this app. You could add features like:

  • Displaying weather forecasts for multiple days.
  • Adding a location search using geolocation.
  • Implementing more detailed weather information (e.g., wind speed, pressure).
  • Adding a dark/light mode toggle.
  • Using a more advanced styling library (e.g., Styled Components, Tailwind CSS).

The possibilities are endless! This is just a starting point.

Building a weather app with Next.js is a fantastic way to learn and apply modern web development skills. You’ve now taken the first steps in creating a functional, user-friendly application. Remember to experiment, explore, and continue learning. The world of web development is constantly evolving, so embrace the challenge and enjoy the process of building something new. Keep practicing, and you’ll be amazed at what you can create. The ability to fetch data from APIs and present it in a clean, interactive interface is a valuable skill, and this project provides a solid foundation for your future endeavors. Now, go forth and build something amazing!

More posts