Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

342
Views
How to use getStaticPaths with redux in next js

Hi guy's might be a dumb question but how do i use getStaticPaths when using redux with next.js?

I am using next redux wrapper to store my content and i am having trouble getting the data to display.

Please see my code example below

import { useSelector } from "react-redux";
import {getPageData} from '../redux/actions/pages'
import { useRouter } from "next/router";
import {wrapper} from '../redux'
import { getNavItems } from '../redux/actions/navItems';
import { getServiceData } from '../redux/actions/services';
import { getHomePage } from '../redux/actions/homePage';




export default function pageTemplate({page}) {


return(
    <h1>{page.title}</h1>
   


)


}

export const getStaticPaths = async () => {
  const pages = await getPageData()

  const paths = Object.keys(pages).map((key) => {

    const page = pages[key]

    return{
      params: {slug: page.slug.current}
    }

  })

  return{
    paths,
    fallback: false
  }

}






export const getStaticProps = wrapper.getStaticProps(
  (store) => async (context) => {

    await store.dispatch(getHomePage());
    await store.dispatch(getServiceData());
    await store.dispatch(getNavItems());
 
  const slug = context.params.slug

  console.log(slug)

    const page = await store.dispatch(getPageData(slug))
    return {
      props: {page},
      revalidate: 60
    };
  }
);






You can also see my redux action which is working fine as i have tested it in the sanity.io groq playground.


import * as actionTypes from '../actions/actionTypes';
import { groq } from 'next-sanity';
import { getClient } from '../../lib/sanity.server';

export const getPageData = (slug) => async (dispatch) => {
  const query =  groq`
  *[_type == "page"]{
    _id,
    title,
    slug
    
  }
  
  
  
  `;
  const queryTwo =  groq`
  *[_type == "page" && slug.current != $slug]{
    _id,
    title,
    slug
    
  }
  
  
  
  `;

if(slug) {
  try {
    // const client = ...
  
    const pageData = await getClient().fetch(query);

    dispatch({
      type: actionTypes.GET_ALL_PAGES,
      payload: pageData
    });
  } catch (err) {
    console.log(err);
  }
}


try {
  // const client = ...

  const pageData = await getClient().fetch(queryTwo);

  dispatch({
    type: actionTypes.GET_ALL_PAGES,
    payload: pageData || pagesData
  });
} catch (err) {
  console.log(err);
}
};


about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!