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.

Comments

[Maxime Kubik]

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

[sunflowerseed]

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]

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