Breaking News: Grepper is joining You.com. Read the official announcement!

getstaticprops nextjs

Add Answer

Hapless Hacker answered on December 10, 2021 Popularity 10/10 Helpfulness 2/10

answer getstaticprops nextjs

related next getStaticProps

related what is getstaticprops in next js

getstaticprops nextjs

Comment

export async function getStaticProps() {

const res = await fetch('https://.../posts')

const posts = await res.json()

return {

props: {

posts,

// Next.js will attempt to re-generate the page:

// - When a request comes in

// - At most once every 10 seconds

revalidate: 10, // In seconds

}

//In context below...

function Blog({ posts }) {

return (

{posts.map((post) => (

{post.title}
))}

)

}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
****************************************************************************
export async function getStaticProps() {

	const res = await fetch('https://.../posts')

	const posts = await res.json()

		return {

                  props: {

                  posts,

              },

// Next.js will attempt to re-generate the page:

// - When a request comes in

// - At most once every 10 seconds

		revalidate: 10, // In seconds

}

}

// This function gets called at build time on server-side.

// It may be called again, on a serverless function, if

// the path has not been generated.

export async function getStaticPaths() {

const res = await fetch('https://.../posts')

const posts = await res.json()

// Get the paths we want to pre-render based on posts

const paths = posts.map((post) => ({

params: { id: post.id },

}))

// We'll pre-render only these paths at build time.

// { fallback: 'blocking' } will server-render pages

// on-demand if the path doesn't exist.

return { paths, fallback: 'blocking' }

}

export default Blog 


Javascript

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: nextjs.org

Tags: getstaticprops javascript

Link to this answer
Share Copy Link

Contributed on Mar 28 2023

Hapless Hacker

0 Answers Avg Quality 2/10

Closely Related Answers

next getStaticProps

Comment

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: nextjs.org

Tags: getstaticprops gets

Link to this answer
Share Copy Link

Contributed on Dec 10 2021

Azizul7m

0 Answers Avg Quality 2/10

what is getstaticprops in next js

Comment

getStaticProps
/* getStaticProps is used to pre-render pages at build time. 
When you use getStaticProps in a page, Next.js will generate the HTML for 
that page at build time and then serve it directly from the cache on subsequent 
requests. This means that the page will load very quickly because it doesn't
need to fetch any data from the server.
*/

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: getstaticprops gets

Link to this answer
Share Copy Link

Contributed on Mar 05 2023

Sakar Hamasaeed

0 Answers Avg Quality 2/10

getstaticprops nextjs

Contents

More Related Answers

getstaticprops nextjs

Closely Related Answers

next getStaticProps

what is getstaticprops in next js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.