How to get data from API and show static data from server using NextJS?
sunflowerseed

sunflowerseed @sunflower

About: Front End Dev

Joined:
Jan 15, 2020

How to get data from API and show static data from server using NextJS?

Publish Date: Mar 11 '21
3 3

It'd be simple to write a React app in 3 minutes to get the weather data from https://api.weather.gov/gridpoints/TOP/31,80/forecast and show it on the page, except we cannot show the data if it is a search engine looking into our page.

Example: https://codesandbox.io/s/quizzical-hooks-wdd9u?file=/src/App.js

In other words, if we curl our page, we won't be able to see the weather info. Anybody know how to do it in 5 minutes using NextJS? Any other alternatives other than NextJS? Many thanks.

Comments 3 total

  • Maxime Kubik
    Maxime KubikMar 11, 2021

    Hey, you need to create an API Endpoint who send the request from weatherAPI

    • sunflowerseed
      sunflowerseedMar 14, 2021

      Ok, I found later: check out getServerSideProps() to do SSR, and getStaticProps() to do Static Generation... just read the docs on how to use them.

      Here is a demo: codesandbox.io/s/quirky-zhukovsky-...

      • Maxime Kubik
        Maxime KubikMar 14, 2021

        You should do the tutorial of next.js, it's cover all concepts

Add comment