How to use getStaticPaths with Redux in Next.js?

Question

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);
  }
};

score 1 · Answer 1 · answered Jul 25 '22 at 01:54

I have faced the same issue before just releasing that you can use getStaticPaths without the need of the next-redux-wrapper

here is some example from a code that I've been working on lately

import { ReduxWrapper, store } from '@store/store'

export const getStaticPaths = async () => {

  const postsSlugs = store
    .getState()
    .posts.posts.map((post) => ({ params: { slug: post.slug } }))

  return {
    paths: postsSlugs,
    fallback: true,
  }
}

export const getStaticProps = ReduxWrapper.getStaticProps(
  (store) => async (context) => {
    const slug = context.params?.slug
    const post = store.getState().posts.post
    return {
      props: { post },
    }
  },
)

I hope that it may help you or anyone searching for the same issue

How to use getStaticPaths with Redux in Next.js?

1 Answers1