Блог

В моем Next.js проект, в котором я настроил пользовательское приложение _app.js поскольку я использую next-auth

_app.js является:

 import React from "react"
import { Provider } from 'next-auth/client'
import '../public/styles.css'

// Use the <Provider> to improve performance and allow components that call
// `useSession()` anywhere in your application to access the `session` object.
export default function App ({ Component, pageProps }) {
  return (
    <Provider
      options={{
        clientMaxAge: 30 * 60,
        keepAlive: 5 * 60
      }}
      session={pageProps.session} >
      <Component {...pageProps} />
    </Provider>
  )
}
 

насколько я понимаю, я не могу использовать getStaticProps или getServerSideProps , поскольку я использую пользовательский _app.js итак, как я могу передать в react return мои извлеченные данные, если они асинхронны?
Например, это ниже mypage.js

 import Layout from '../components/layout'
import { useSession } from 'next-auth/client'
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const siteurl = process.env.NEXT_PUBLIC_SITE_URL;

export default function Page() {
  const [ session, loading ] = useSession()

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' amp;amp; loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout>no data</Layout> }

  if (session){

    // Fetch content from protected profile api route
    async function fetchVidsRequest() {
      const response = await fetch(`${siteurl}/api/profile`);
      const data = await response.json();
      //console.log("DATA: " JSON.stringify(data, null, 2));
      return data;
    }

    const mainVid = async () => {
      const result = await fetchVidsRequest()
      return result
    };

    mainVid()  // <--- this is a promise ! how can i pass it to the react code below?
    
    return (
      <Layout>
      <div>
        <h1>Latest videos</h1>
        <hr />
        <InfiniteScroll
          dataLength={3} //This is important field to render the next data
          next={data}
          hasMore={true}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Loaded all videos</b>
            </p>
          }
        >
          {data.map((i, index) => (
            <div key={index}>
              <p>{i.dbsubs.inflVid[index]}</p>
            </div>
          ))}

        </InfiniteScroll>
      </div>
      </Layout>
    )

  }
}