Follow these steps to integrate a dynamic weather widget into your Next.js project.
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:
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:
Add the environment variable during deployment, or if the project is already deployed, add it through the project dashboard
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:
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons swr framer-motion
Import the Weather
component in the file where you want to display the widget.
import Weather from './components/Weather';
Add the Weather
component in your JSX:
<Weather />
The weather widget should now be integrated and look similar to this:
It's just straight text, no css around it.