Issue with meta tags when using redux-persist in Next.js

user_8066850 0
Viewed 178

I'm building an e-commerce app with Next.js and redux. I have noticed that when I add redux-persist to the app all meta tags stop working. I have added my code snippets below

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import shopReducer from './reducers/shop/shopSlice'
import storage from 'redux-persist/lib/storage'
import { persistStore,persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'

const initState = {}

const persistConfig = {
   key: 'root',
   version: 1,
   storage,
   whitelist: ['shop'],
}

const rootReducer = combineReducers({
   shop: shopReducer,
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

const reduxStore = () => {
   const store = configureStore ({
       initState,
       reducer: persistedReducer,
       middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
          serializableCheck: {
             ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
          },
       }),
   })

   const persistor = persistStore(store)
   return { persistor, store }
}

export default reduxStore

Then in _app.js

import Layout from '../components/Layout'
import { Provider } from 'react-redux'
import reduxStore from '../context/store'
import { PersistGate } from 'redux-persist/integration/react'

const { persistor, store } = reduxStore()

function MyApp({ Component, pageProps }){
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>
            </PersistGate>
        </Provider>
    )
}

export default MyApp

The meta tags component is like this excluding the other tags.

import Head from 'next/head'

function Meta({ title, keywords, description, image, appName, url }){
    return (
        <Head>
            <meta name="theme-color" content="#0066b2" />
            <meta name="description" content={description} />
            <meta name="keywords" content={keywords} />
            <meta name="author" content="author" />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta property="twitter:image" content={image} />
            <meta property="twitter:image:alt" content={appName} />
            <meta name="msapplication-TileColor" content="#ffffff" />
            <title>{title}</title>
        </Head>
    )
}

Meta.defaultProps = {
    appName: 'Store',
    url: 'https://example.com',
    title: 'Store Example',
    keywords: 'ecommerce',
    description: 'Store',
    image: '/storefront.png',
}

export default Meta

How can I fix the issue because I want to use both - redux-persist to save a guest shopping cart and meta tags for SEO?

Thanks

redux-persist react-redux redux-toolkit next.js reactjs
1 Answers

I've found a solution on this Github link. Apparently there's an issue with redux-persist which disables SSR and that's basically why meta tags don't work when using redux-persist.

The solution is to change the code below

<PersistGate persistor={persistor} loading={null}>
    <Layout>
        <Component {...pageProps} />
    </Layout>
</PersistGate>

to this

<PersistGate persistor={persistor} loading={null}>
    {() => (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )}
</PersistGate>
user_80668500
Related