'Next.js Doesn't Fetch Data When I Use Layout System

I need to use a layout system like in the app.tsx, but I am having a problem. When I create a static content there is not a problem, but when I fetch some data, Next.js doesn't show me the content. When I use if statement before return instead of renderLayout, it doesn't show me css styles except index.tsx. When I use a layout system like in the app.tsx, it doesn't fetch the data and show me the content. Is there any idea to fix this problem?

app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { ThemeProvider, PartialTheme } from "@fluentui/react";
import Layout from '../components/Layout';

const bodyTheme: PartialTheme = {
  semanticColors: {
    bodyBackground: 'gray',
  },
};

function MyApp({ Component, pageProps }: AppProps) {

  /*  if (Component.getLayout) {
     return Component.getLayout(<Component {...pageProps} />)
   } */

  const { layoutProps, ...modifiedPageProps } = pageProps;

  const renderLayout = Component.getLayout ?? Layout

  return (
    <>
      <ThemeProvider style={{ minHeight: "82vh" }} theme={bodyTheme}>
        {/* <Component {...pageProps} /> */}
        {renderLayout(<Component {...modifiedPageProps} />, layoutProps)}
      </ThemeProvider>
    </>
  )
}

export default MyApp;

at index.tsx page, I have a basic system that only fetches data and shows it, but with this layout system the data cannot be fetched, so the page seems empty.

index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { ThemeProvider, PartialTheme } from '@fluentui/react/lib/Theme';
import { GetServerSideProps } from 'next'
import { useMemo } from 'react';

const lightTheme: PartialTheme = {
  semanticColors: {
    bodyBackground: 'rgb(107, 123, 192)',
    bodyText: 'white',
  },
};

const Home = ({ data }) => {

  const dataMap = useMemo(() => {
    return data;
  }, [data])  

  return (
    <div className={styles.main}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className={styles.information}>
        <h2>Fake API Company</h2>

        <p style={{ color: "#fff" }}>As Fake API Company, we are happy to give you great service</p>
        <p style={{ backgroundColor: "rgb(107, 123, 192)", color: "#fff", padding: "20px", borderRadius: "10px" }}>Some of Our Employees</p>
      </div>

      <div style={{ margin: "20px", display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
        {
          dataMap.map(item => (
            <ThemeProvider key={item.id} style={{ margin: "20px", padding: "20px", width: "250px", height: "200px", display: "flex", flexDirection: "column", justifyContent: "space-evenly", alignItems: "flex-start" }} theme={lightTheme}>
              <div>Name: {item.name}</div>
              <div>Email: {item.email}</div>
              <div>Phone: {item.phone}</div>
              <div>Website: {item.website}</div>
            </ThemeProvider>
          ))}
      </div>
    </div>
  )
}

export default Home;

type Data = {}


export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data: Data = await res.json();

  return {
    props: {
      data
    }
  }
}

I will be very glad if someone can help me about this problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Next.js Doesn't Fetch Data When I Use Layout System

Sources

Related Questions