DEV Community

sunflowerseed
sunflowerseed

Posted on

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

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.

Top comments (3)

Collapse
 
mkubdev profile image
Maxime Kubik • Edited

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

Collapse
 
sunflower profile image
sunflowerseed • Edited

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-...

Collapse
 
mkubdev profile image
Maxime Kubik

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