import { useEffect, useRef } from "react";
import { useRouter } from "next/router";
import { useSelector, useDispatch } from "react-redux";
import Layout from "../../../../src/components/layouts/Layout";
import Banners from "../../../../src/components/shop/Banners";
import ShopLayout from "../../../../src/components/shop/ShopLayout";
import { auth, locale, languages, getToken, refresh, getTranslation, getTags } from "../../../../src/common/apis";
import { setLanguage, setLocale, setCta, setFnbmeta } from "../../../../src/redux/actions/shopActions";
import { setGlobalProducts } from "../../../../src/redux/actions/globalActions";

const Campaign = ( { posts } ) => {
    console.log( 'teststs', posts );
    const router = useRouter();
    const dispatch = useDispatch();
    const { lang, homepage, campaign } = router.query;
    const globalState = useSelector( ( state ) => state.globalReducer );
    const shopState = useSelector( ( state ) => state.shopReducer );
    const globalRef = useRef( globalState );
    const shopRef = useRef( shopState );
    const langRef = useRef( locale );
    const languagesRef = useRef( languages );

    useEffect( () => {
        if( langRef.current.includes( lang ) ) {
            shopRef.current.locale = lang;
            dispatch( setLocale( lang ) );
            dispatch( setLanguage( languagesRef.current[ lang ] ) );
        }
        refresh( globalRef.current, shopRef.current, dispatch, homepage, lang, globalRef.current.currencies, campaign );
    }, [ lang ] );

    return (
        <Layout>
            <Banners type={ lang } slug={ homepage } item={ campaign } data={ globalState } containerType="fluid"/>
            <ShopLayout
                treeColumn
                shopContentResponsive={{ xs: 24, lg: 24 }}
                productResponsive={{ xs: 24, sm: 12, md: 6 }}
                productPerPage={ 24 }
            />
        </Layout>
    );
}

Campaign.getInitialProps = async ( { query } ) => {
  // Call an external API endpoint to get posts
  // const res = await fetch('https://.../posts')
  // const posts = await res.json()
  const posts = [ 'yes', 'no' ];

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    posts: posts
  }
}

export default Campaign

I've tried many type of getInitialProps function, but i still can't get the result of posts variable inside the console log.

it's a page that located [lang]/[campaign]/index.js

i've tried to add getInitialProps function at my _app.js and it's not working too.

i'm using redux at my _app.js, is it cause the problem?