How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined

by

Methods like getServerSideProps and getStaticProps are for fetching data on the server but they only work for page components inside the pages folder (the initial way of setting up routes in Next.js).

Since Next.js 13, in the app directory we have Server Components, where you can fetch data directly in the component body. In your case, it would be something like this:

/*
  If you want to access headers or cookies while fetching data,
  you can use these functions:
*/
import { cookies, headers } from "next/headers";

/* 
   Depending on whether you are using dynamic routes or not, and the `cache` 
   option of `fetch`, you can mimic previous methods 
   like getStaticProps or getServerSideProps.
*/
async function getCampaigns() {
  const response = await fetch("http://127.0.0.1:8000/api/campaigns", { cache: "no-store" });
  const data = await response.json();
  return data;
}

/*
 If the below component is the default export of a `page.js` and you are using 
 dynamic routes, slugs will be passed as part of `params`, and 
 query strings are passed as part of `searchParams`.
 You can pass them to your data fetching function.
*/
export default async function Index({ params, searchParams }) {
  const data = await getCampaigns();
  return <div>{/* You can use data here. */}</div>;
}

For more, you can read App Router Incremental Adoption Guide.

More Related Contents:

  1. “SyntaxError: Unexpected token < in JSON at position 0"
  2. Window is not defined in Next.js React app
  3. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  4. Can’t build React/Next project – found page without a React Component as default export (context api file)
  5. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  6. First Load JS shared by all is rather heavy in next.js
  7. Warning: Function components cannot be given refs
  8. Error: How to serialize data from getStaticProps : Next.js
  9. Environment variables not working (Next.JS 9.4.4)
  10. Next.js context provider wrapping App component with page specific layout component giving undefined data
  11. I can’t reference an image in Next.js
  12. React Error: Target Container is not a DOM Element
  13. unable to deploy next js to azure
  14. How to Set port in next.js
  15. What is the best way to have a fallback image in NextJS?
  16. Next.js: Error: React.Children.only expected to receive a single React element child
  17. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  18. how can I use top level “await” in typescript next.js
  19. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  20. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  21. How to prevent Next.js from instantiating a singleton class/object multiple times?
  22. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  23. How to avoid caching in the app directory of Next.js?
  24. Want to have an event handler for the browser’s back button with next.js
  25. Next.js, getStaticProps not working with component but does with page
  26. Why IE 11 display blank page rendering react app
  27. How to disable button in React.js
  28. next.js environment variables are undefined (Next.js 10.0.5)
  29. Is there a function, like componentWillUnmount, that will fire before the page is refreshed
  30. Vite – change ouput directory of assets

Leave a Comment