Next.js Discord

Discord Forum

Can't use getStaticPaths and getStaticProps

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
I'm using next js 13.4 and trying to fetch data from server side on dynamic route.
in all examples i found getStaticPaths and getStaticProps are used with /app/something/[id].tsx, but it doesn't work in my app and i'm using /app/something/[id]/page.tsx. is it possible to use getStaticPaths and getStaticProps in my case? i can't find an example of how to do it
Answered by B33fb0n3
methods like getStaticProps are methods from the pages router. It seems like you are using the app router. For the app router you can directly fetch inside the component.

An example would look like this:
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}
View full answer

3 Replies

B33fb0n3
methods like getStaticProps are methods from the pages router. It seems like you are using the app router. For the app router you can directly fetch inside the component.

An example would look like this:
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}
Answer
B33fb0n3