Build a Weather App from Scratch with Next.js

Planning the Features

The most basic weather apps usually provide just the general information like location and temperature, while others are more complex—including weather forecasts, detailed data graphs, and options to filter the information.

We’ll make a blend between the two scopes by providing the current weather conditions for any city in the world and also allowing user interaction to change the location and display the data in their preferred unit system.

The full list of features we’ll implement include:

• the ability to search cities
• current local time and date
• temperatures in both metric and imperial units
• humidity, wind speed and direction
• sunrise and sunset times
• error handling and loading info

Wireframing the App

First, let’s create a wirefame, to help us plan out our user interface so that we can accommodate our desired features.

On the top level, we’ll use a two-column layout.

Since the main weather conditions need to be highlighted, we’ll create a separate MainCard component and dedicate a whole left column to it. It will hold information about the location, weather status, description, and temperatures.