Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

341
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda