getStaticProps is not getting invoked inside blogs/[slug].js

Answered

Masai Lion posted this in #help-forum

Masai LionOP

2024-01-25T11:38:35.000Z

please help me run getStaticProps

repository link: https://github.com/ayush166/nextjs

import { allPosts } from 'contentlayer/generated'
import React from 'react'
export const getStaticPaths = () => {
    return {
      paths: allPosts.map((p) => ({ params: { slug: p.url } })),
      fallback: false,
    }
  }
export async function getStaticProps(){
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const repo = await res.json()
    console.log("props",repo);
    return { props: { repo } }
}



const BlogPage = ({repo}) => {
    console.log("ds",repo);
  return (
    <div>{ repo}</div>
  )
}

export default BlogPage

Answered by Ray

p.url.replace("/blogs/", "") this should fix it

View full answer

22 Replies

Masai LionOP

2024-01-25T14:06:14.000Z

Getstaticprops is not getting invoked

@Masai Lion Getstaticprops is not getting invoked

Ray

2024-01-25T14:22:46.000Z

what do you see on the console?

Masai LionOP

2024-01-25T15:50:10.000Z

no errors in server console nor browser console

there should be a console.log output from getStaticProps

in serverconsole/vs code terminal

Ray

2024-01-25T15:54:28.000Z

I copied the code and try to run it and it works except this line <div>{ repo}</div>

Masai LionOP

2024-01-25T15:55:05.000Z

getStaticProps function is not getting invoked that is the issue

@Ray I copied the code and try to run it and it works except this line `<div>{ repo}</div>`

Masai LionOP

2024-01-25T15:55:35.000Z

repo value returned is null yes

@Masai Lion repo value returned is null yes

Ray

2024-01-25T15:56:06.000Z

no, it return the JSON object and cause an error when rendering it

just cloned your repo and it does not work run

Masai LionOP

2024-01-25T15:58:20.000Z

import { allPosts } from 'contentlayer/generated'
import React from 'react'
export const getStaticPaths = () => {
    console.log("getStaticPaths")
    return {
      paths: allPosts.map((p) => ({ params: { slug: p.url } })),
      fallback: false,
    }
  }
export const getStaticProps = async()=>{
    console.log("getStaticProps")
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const repo = await res.json()
    console.log("props",repo);
    return { props: { repo } }
}



const BlogPage = ({repo}) => {
    console.log("ds",repo);
  return (
    <div>Blog Page</div>
  )
}

export default BlogPage

you are seeing this code right ?

at pages/blog/[slug].js

@Ray just cloned your repo and it does not work run

Masai LionOP

2024-01-25T16:00:34.000Z

console.log dosen't show up for getStaticProps

my requirement it should show up

@Masai Lion console.log dosen't show up for getStaticProps my requirement it should show up

Ray

2024-01-25T16:06:12.000Z

return {
paths: allPosts.map((p) => ({ params: { slug: p.url } })),
fallback: false,
}
because you set fallback to false

try set it to true and it will run

you generate the params.slug with p.url which is /blogs/higher-order-functions in getStaticPaths