1

//pages

function MyApp({ Component, pageProps: {session, ...pageProps},example }: AppProps & AppOwnProps) {
  return (
    <SessionProvider session={session}>
    <Layout data={example}>
   <Component {...pageProps} />
   </Layout>
   </SessionProvider>
  )
}

//layout

<Fragment>
      <Header productData={props.data}/>
      <Navbar />
      <main className={styles.main}>{props.children}</main>
      <Footer />
 </Fragment>

//component

const Header... {
<Sidebar data={props.productData}>
}

there is a nextjs in this build. I should do something like getstaticprops . I establish the mongodb connection and pull my product categories and show in Sidebar. getstaticprops only works inside page. my sidebar is a component.

I pull the products using getinitialprops in the app and transmit them with props. There is no problem until here, but it does not load other pages again. in page transitions, it only switches to the pages that are processed with the database.

What should be the best way to take my products and transfer them to the sidebar?

in _app.tsx ?

MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context);
  let res = await fetch(`${process.env.NEXTAUTH_URL}/api/prodController`,{method:'GET',headers: {
    "Content-Type": "application/json",
  },});
  const data =await res.json()

  return { ...ctx, example: JSON.parse(JSON.stringify(data)) };
};

but not reload other page.

it won't work in the component when done like this

export const getStaticProps: GetStaticProps = async (context) => {
    // get  data from API
    let res = await fetch(`${process.env.NEXTAUTH_URL}/api/prodController`,{method:'GET'});
    const data =await res.json()
    // return props
    return {
      props: { posts: data },
    }
juliomalves
  • 42,130
  • 20
  • 150
  • 146
oykn
  • 190
  • 1
  • 12
  • Is `/api/prodController` an internal API route? If so, you shouldn't call that in your `getStaticProps`. You can write code to access your database directly in `getStaticProps`. See [Fetch error when building Next.js static website in production](https://stackoverflow.com/questions/66202840/fetch-error-when-building-next-js-static-website-in-production). – juliomalves Aug 09 '22 at 12:56
  • api/prodController is where I return res.json with mongodb. The place I want to get is not in the pages. I can't access it inside my component. I don't understand your solution suggestion? It's not that it doesn't create static pages when you use initialprops anyway, I mean it's a general thing, what to do as an alternative to that @juliomalves – oykn Aug 09 '22 at 13:10
  • I want to get my data inside my sidebar component, there is a problem in both methods. I cannot move getstaticprops out of pages. I can move it with initialprops in app.tsx, but this time the other pages are not refreshed. because it's static @juliomalves – oykn Aug 09 '22 at 13:16
  • Is it in the component you say do getStaticprops directly? Can you tag if there is a concrete example? @juliomalves – oykn Aug 09 '22 at 13:38
  • `getStaticProps` can only be used in page components, you'll then have to pass the data to the component where you need it. There are code examples on how to use `getStaticProps` in the [docs](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) and on the answer I linked above. – juliomalves Aug 09 '22 at 13:56
  • I already know that. This component is not in a pages. I can forward it from _app.tsx just so you didn't understand my question.Since I can't use getstaticprops in _app.tsx ?alternatively it says getinitialprops so it is passed. but other static pages are not reloading. they need a solution @juliomalves – oykn Aug 09 '22 at 14:07
  • If you need this for all pages then you'll have to either add `getStaticProps` to each page, or do it inside `getInitialProps`. If you do it from `getInitialProps` just be aware that it can run on the server-side and on the client-side, so you need to adjust your code accordingly. See [NEXT.JS: Can't connect to mongoDB Database using getInitialProps](https://stackoverflow.com/questions/67434329/next-js-cant-connect-to-mongodb-database-using-getinitialprops) for an example for the `getInitialProps` approach. – juliomalves Aug 09 '22 at 14:49

0 Answers0