Follow these steps to integrate a dynamic weather widget into your Next.js project.
Step 1: Create an API Route
Inside your app folder, create a new folder named api.
Inside the api folder, create a subfolder for your weather route (e.g., weather).
Add a file named route.js inside the weather folder.
You can find the code for route.js here.
Make sure to change the name of the city in the code as needed:
Step 2: Add the Environment Variable
Go to the OpenWeatherMap website, create an account, and navigate to the My API keys section in your profile to generate an API key.
It might take a few minutes for the API key to activate and start working.
Create a file named .env in your project folder and add the environment variable with your API key:
If you are hosting the project on Vercel:
Add the environment variable during deployment, or if the project is already deployed, add it through the project dashboard
Step 3: Create a Weather Component
Create a folder named components in your project folder.
Inside the components folder, create a file named Weather.js.
Add the code from here to Weather.js.
Install the dependencies by running the following command in project folder terminal:
Step 4: Import and Use the Weather Component
Import the Weather component in the file where you want to display the widget.
Add the Weather component in your JSX:
The weather widget should now be integrated and look similar to this:
It’s just straight text, no css around it.
