Weather App with Next.js

Let's build a weather application using Next.js that fetches and displays weather information. I'll provide you with the code and instructions on how to set it up in VS Code.

How to Install and Set Up the Project in VS Code

Prerequisites

1. Make sure you have Node.js installed (version 18.18 or later) 1
2. Make sure you have Visual Studio Code installed
3. You'll need a free API key from WeatherAPI.com for weather data

Step-by-Step Installation

1. Create a new Next.js project:

   npx create-next-app@latest weather-app

2. During setup, select the following options:

   • Would you like to use TypeScript? Yes
   • Would you like to use ESLint? Yes
   • Would you like to use Tailwind CSS? Yes
   • Would you like to use src/ directory? No
   • Would you like to use App Router? Yes (recommended)
   • Would you like to customize the default import alias? No

3. Navigate to your project folder:

   cd weather-app

4. Open the project in VS Code:

   code .

5. Install shadcn/ui components:

   npx shadcn@latest init
   • Choose the default styling options
   • When asked about components, select Yes

6. Install required shadcn/ui components:

   npx shadcn@latest add card button input toast

7. Create the necessary files as shown in the code above:

   • app/page.tsx
   • components/weather-dashboard.tsx
   • components/weather-display.tsx
   • components/weather-forecast.tsx
   • app/api/weather/route.ts

8. Add your WeatherAPI key to environment variables: Create a .env.local file in the root of your project and add:

   WEATHER_API_KEY=your_api_key_here

9. Start the development server:

   npm run dev
10. Open your browser and navigate to http://localhost:3000 to see your weather app in action!

How the App Works

1. The app uses Next.js App Router for routing and page structure 2
2. It fetches weather data from WeatherAPI.com through a server-side API route

3. The main components are:

   • WeatherDashboard: Handles the search functionality and state management
   • WeatherDisplay: Shows the current weather conditions
   • WeatherForecast: Displays a 3-day weather forecast
4. The app uses Tailwind CSS for styling and shadcn/ui for UI components
5. It includes loading states and error handling for a better user experience

Key Features

• Current weather conditions (temperature, humidity, wind, etc.)
• 3-day weather forecast
• Responsive design that works on mobile and desktop
• Dark mode support
• Error handling and loading states
• Clean, modern UI with Tailwind CSS and shadcn/ui

Now you have a fully functional weather app built with Next.js! You can customize it further by adding more features like geolocation, more detailed forecasts, or weather maps.

Please make sure to add the following environment variable to your project: