Next.js was conceived to make it easy to create universal apps. That's why fetching data on the server and the client when necessary is so easy with Next.js.
By using getStaticProps Next.js will fetch data at build time from a page, and pre-render the page to static assets.
Quickly preview this example directly in your browser with StackBlitz:
Click any of the buttons below to start a new development environment to demo or contribute to the codebase without having to install anything on your machine:
Deploy the example using Vercel:
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example data-fetch data-fetch-app
# or
yarn create next-app --example data-fetch data-fetch-appDeploy it to the cloud with Vercel (Documentation).