I use getStaticProps in a Next.js page.
export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
store.dispatch(getInfoRequest());
store.dispatch(END);
await store.sagaTask.toPromise()
});
This is a dynamic route.
An when I refresh the page I get:
Error: getStaticPaths is required for dynamic SSG pages and is missing for '/dates/[[...info]]'.
Read more: https://err.sh/next.js/invalid-getstaticpaths-value
Why does this error happen?
It looks like you've forgotten to add getStaticPaths function to your page. Both are required when statically-generating pages for dynamic routes.
Since dynamic routes include parameters that could be anything, Next.js needs to know what concrete paths to generate at build time. This is why you need to export getStaticPaths which should include in its return value a list of string paths with the placeholders replaced with real values.
So, for instance, if your dynamic route is /user/[id], then getStaticPaths might return:
{
paths: [
'/user/1',
'/user/2',
'/user/3'
],
fallback: true
}
You may want to generate these paths dynamically at build time, which you can totally do within getStaticPaths. So, given you've elsewhere created a function called getUsers, it might look like this:
export async function getStaticPaths() {
const users = getUsers();
return {
paths: users.map((u) => `/user/${u.id}`),
fallback: true
}
}
For more information see the documentation.
Related
I am trying to build NextJs app with 13th version of next and redux.
I found the way to pass redux provider in app, but I still don't understand next thing:
How can I use "createAsyncThunk" actions or RTK query with "getStaticProps" and another next functions for fetching data in nextJS 13 and app folder?
getServerSideProps and getStaticProps run on the server so they do not have any relation with your components and your hooks, so there is no way that they have access to the redux provider
but since getServerSideProps runs on every request you can use the request the pass data to it. one solution is to pass data in the url.
let suppose that you have page A with getServerSideProps you can call it like this :
const router = useRouter();
router.push({
pathname: '/url_of_page_A',
query: {
data: JSON.stringify( { a: 'value', b: 'another value'} ) ;
},
});
Now in your page A inside getServerSideProps you can access data via context query
export async function getServerSideProps(context) {
const data = JSON.parse(context.query.data);
}
In my Next.js application I am using the catch all functionality of dynamic routing. When I use the package next-sitemap for creating a sitemap I see in the file sitemap-0.xml there is a link like:
https://example.com/posts/1/2/3/4/5.
I believe this corresponds with the getStaticPaths function in the file [...posts.js] like below:
export async function getStaticPaths() {
const dbRows = await getPostIds();
const postIds = dbRows.map(post => post['post_id'])
return {
paths: [{params: {postId: postIds}}],
fallback: 'blocking',
}
}
Luckily the next-sitemap package offers to exclude pages. So this might be a solution for me. Though somehow I have the feeling the solution is in Next.js itself or the next-sitemap package itself besides using the exclude config.
I solved the issue by providing all path parameters instead of just an array of post ids.
Solution:
paths:
[{params: {postId: ['Python', '1']}},
{params: {postId: ['Java', '2']}}]
I want to get URL parameters at the begining of page, but firstly it returns empty, after a while
const rout = useRouter()
useEffect(() => {
console.log('queries:')
console.log(rout.query)
}, [rout])
It returns {} for the first time, but after a render, It returns {'myparam': 'blabla'}
How can I get URL parameter without returning an empty result?
According to the docs, the useRouter hook from next/router returns a prop isReady, which you can check.
isReady: boolean - Whether the router fields are updated client-side
and ready for use. Should only be used inside of useEffect methods and
not for conditionally rendering on the server.
const rout = useRouter()
useEffect(() => {
if (rout.isReady) {
//rout.query will be ready here
}
}, [rout])
I want to set my URL's as slugs in my next.js app, but also need to pass the itemID to getStaticProps in order to get the data I need from my API.
How can I pass both ID and slug from getStaticPaths to getStaticProps rather than one or the other?
export async function getStaticPaths() {
const paths = items.map(item => (
{ params: { id: item.itemID }}
))
return {paths, fallback: false}
}
I was hoping to do something like this:
const paths = items.map(item => ({
params: {
id: item.itemID,
title: item.description
}
}))
I believe you can find the answer to your question in this blog example from Next.js. They call getStaticPaths() first to get a list of all paths, and then pass that information over to getStaticProps() to get data for each of the paths. Since the data is generated at build time, I believe Nextjs gets all your pages built and ready to serve in one go.
I want to create a bunch of static pages, but I am not sure that next.js is up to it. Gatsby, with default settings, drops dead.
I have 3 types of data I want to show respectively generating 15 / 50 / 150 k of pages
Later one (150k), I expect,to be rebuild each day.
Will nextJS handle that? Are there any time estimates I can take a look?
If I understand correctly
export async function getStaticPaths() {
// Call an external API endpoint to get cities
const res = await fetch('https://.../cities')
const cities = await res.json()
// Get the paths we want to pre-render based on cities
const paths = cities.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
instead of doing one call, I will have to call fetch repeatedly until I will have all the data in one variable, but I am a bit afraid that everything will crash.
What are your thoughts, guys?
UPD
https://static-tweet.now.sh/ that should be my answer