AerisWeather’s API is the most advanced Weather API available, and its robust suite of hyper-local weather datasets makes it invaluable to an ever-growing number of businesses and industries. Part of what makes the AerisWeather API great is that it can be easily integrated into projects of varying scales and code bases. One such code base that many companies are beginning to rely heavily on in their web-based applications is Next.js.

Next.js is a flexible open-source React development framework that enables the creation of fast web-based applications. It was created by Vercel to help supercharge React projects with extra enhancements including server-side rendering and file-based routing. This tutorial aims to show how easy it is to integrate our AerisWeather API into a Next.js project, and will guide you step-by-step in getting your project up and running.

Prerequisites

To follow along with this tutorial, you’ll need the following:

• An AerisWeather API subscription or free trial
  • Don’t have an account yet? Start your free trial here.
• Working knowledge of HTML, CSS, JavaScript, React.js, Node.js, and either NPM or Yarn
• The following software installed:
  • NPM or Yarn
  • Code editor, such as Visual Studio Code

Once these prerequisites are met, it’s time to start building!

Creating a Next.js App

Follow Next.js’ guide on creating a new Next.js project here. For this tutorial, you’ll need to decline to use the experimental “app/” directory. After you’ve created your project, start the server and test that it works by visiting your browser’s localhost:3000 – You should see a Next.js splash screen. If you have an existing project, feel free to use that instead, but note that you may need to tweak some of the instructions here based on your project’s needs and structure.

Adding the AerisWeather API module

Now that you have successfully created your Next.js project and tested that it works, the next step is to integrate the AerisWeather module into your project to begin supercharging your application with weather data. Adding this module is easy and only requires a few steps:

• Open your terminal, ensuring you are navigated to your project folder, and enter the following command:

npm install @aerisweather/javascript-sdk

• Import the module into your project by adding the following line somewhere near the top of your index.tsx file (located in src/pages/):

import AerisWeather from '@aerisweather/javascript-sdk';

• Set your AerisWeather API account access keys.
  • Add the following line to that index.tsx file:

const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

• IMPORTANT NOTE: While we have assigned these keys in this way for the sake of this tutorial, it is STRONGLY RECOMMENDED that you do not expose these keys in a fully-deployed application. It is recommended to make use of a strategy such as a .ENV file or another environment variable setup to protect your keys and prevent unwanted access.
  
• Import the CSS into your project by adding the following line just below your import:

import '@aerisweather/javascript-sdk/dist/styles/styles.css';

Correcting the Error

If you attempt to run your project at this point, it will fail, citing an error that reads “Global CSS cannot be imported from within node_modules.” This error can be a major pain point among new Next.js developers, and is the result of a restriction placed on Next.js projects by default. This restriction is due to be lifted in an upcoming release of Next.js 13+, which ties into the aforementioned “app/” directory. In the meantime, this error can be resolved by adding the following code to the nextConfig object in your next.config.js file:

transpilePackages: ['@aerisweather/javascript-sdk']

Once you have done this, restart your server for the change to take effect. Then simply reload the page – the error should now be resolved.

Using the API

Now that your project is built and configured, it’s time to put it to work! The AerisWeather API module allows you to take advantage of a plethora of weather data using a few different strategies. Most of the hard work is already done and accessing the data from here is plug-and-play.

AerisWeather API

The AerisWeather API can be easily tested by adding the following code snippet to your index.tsx file:

aeris.api().endpoint('observations').place('seattle,wa').get().then((result) => {
     var data = result.data.ob;
     console.log(`The current weather is ${data.weatherPrimary.toLowerCase()} and ${data.tempF} degrees.`);
});

Once added, reload your page and check your in-browser console – if everything’s been configured correctly thus far, you will see a message displaying the current weather here. Congratulations! You can now freely use our powerful API and integrate our weather data into your application.

AerisWeather Interactive Map

Interactive Maps, like the baseline API, are relatively plug-and-play. To test one for yourself, go ahead and add the following snippet to your index.tsx file. Be sure to place this within the component function, before the return:

aeris.views().then((views) => {
    const map = new views.InteractiveMap('#map', {
        strategy: 'leaflet',
        zoom: 4,
        layers: 'satellite,radar'
    });
    
    map.on('ready', () => {
        map.setCenter({ lat: 47.5, lon: -121.5 });
        map.setZoom(6);
    });
});

Then, within your component’s “return(),” replace <main> and its contents with a new container such as a <div> and add the HTML ID “map” to it. You’ll want to style this container with a generous width and height so it will properly display on the page. From here, refresh your browser – you should see your interactive map. Feel free to tinker with the map options within your code. You can find more on customizing an Interactive Map, along with more advanced implementations, here.

Note: If you encounter an error that states that the map container is already initialized, you will likely need to load the site in a private tab or clear your browser cache.

AerisWeather Interactive Map App

Lastly, for a more robust map with options for inputting a location and toggling layers, we will create an Interactive Map App. This will require one small tweak to work. First, add the following line of code alongside your other imports:

import { useEffect } from 'react';

Then, add the following code snippet to your index.tsx, once again being sure to put this within your component function:

useEffect(() => {
    aeris.apps().then((apps) => {
        const map = new apps.InteractiveMapApp('#ia-map', {
            map: {
                 strategy: 'leaflet',
                 zoom: 4,
                 layers: 'satellite,radar'
            },
            panels: {
                layers: {
                    buttons: [{
                        id: 'radar',
                        value: 'radar:80',
                        title: 'Radar'
                    },{
                        id: 'satellite',
                        value: 'satellite:75',
                        title: 'Satellite'
                    },{
                        id: 'alerts',
                        value: 'alerts',
                        title: 'Alerts'
                    }]       
                }
            }
        });
    });
}, [])

useEffect is a React hook that will ensure that the map doesn’t get applied to the container element until after the page has rendered, and without it, you’d see errors in your console and the map wouldn’t load. Thanks to this fix, you now have a working Interactive Map App in your Next.js project. Feel free to tweak and customize this to your heart’s content – you can find more information and examples here.

Conclusion

In this tutorial you’ve successfully integrated AerisWeather into a basic Next.js project and overcome a few of the common snags along the way. From here, take your existing Next.js projects to the next level with robust weather data and powerful mapping tools, or use this project as a base for your next application!

Share this post: