I have returned json response from getStaticProps and console logged it in getStaticProps to verify correct json response. So, fetch is working fine and I am getting correct response from API.

import Layout from '../ponents/layout';
import fetch from 'isomorphic-unfetch';
const Index = ({data}) => {
    console.log(data)
    return (
        <Layout>
            <div>
                <h1>Wele to Next Application</h1>
                <h3>Users List</h3>
                {data ? 
                data.map((item, i) => {
                   return (
                   <li key={i}>{item.name}</li>
                   )
               }):
                <span>Loading...</span>
               }
                   
               
            </div>
        </Layout>
    );
}
export const getStaticProps = async () => {
    const response = await fetch(``);
    const data = await response.json();
    console.log(data);
    return {
        props:{
            data
        } 
    }
}
export default Index;

Getting data as undefined in Index ponent. What am I missing ?

My Output - Github -

I have returned json response from getStaticProps and console logged it in getStaticProps to verify correct json response. So, fetch is working fine and I am getting correct response from API.

import Layout from '../ponents/layout';
import fetch from 'isomorphic-unfetch';
const Index = ({data}) => {
    console.log(data)
    return (
        <Layout>
            <div>
                <h1>Wele to Next Application</h1>
                <h3>Users List</h3>
                {data ? 
                data.map((item, i) => {
                   return (
                   <li key={i}>{item.name}</li>
                   )
               }):
                <span>Loading...</span>
               }
                   
               
            </div>
        </Layout>
    );
}
export const getStaticProps = async () => {
    const response = await fetch(`https://jsonplaceholder.typicode./users`);
    const data = await response.json();
    console.log(data);
    return {
        props:{
            data
        } 
    }
}
export default Index;

Getting data as undefined in Index ponent. What am I missing ?

My Output - https://ibb.co/Ns9143C Github - https://github./ho-dor/next-poc

• javascript
• reactjs
• next.js

• Everything looks normal and I just paste your code overhere in codesandbox and it works like charm :) – Closery Commented Aug 16, 2020 at 8:38
• Please look at my output - ibb.co/Ns9143C – Kunal Rai Commented Aug 16, 2020 at 8:43
• I see but as I say there is nothing wrong with this code, if something is wrong it is not here. Can you push your project to the Github or something like this so we can check it? – Closery Commented Aug 16, 2020 at 8:48
• Github repo - github./ho-dor/next-poc – Kunal Rai Commented Aug 16, 2020 at 9:01

4 Answers 4

The problem is in your custom App file, if your remove your custom App wrapper your problem will solve but if you want to keep custom app wrapper just update your _app.js like this:

import App from 'next/app';

const MyApp = ({ Component, props }) => {
    return (
        <div className="MyApp">
            <p>_app.js file</p>
            <Component {...props} />
        </div>
    );
};

MyApp.getInitialProps = async (appContext) => {
    // calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext);

    return { ...appProps };
};

export default App;

For more info check here: Custom App - NextJS

getStaticProps (Static Generation): Fetch data at build time.

Maybe you could try to rebuild your app to see if it works.

You are using custom _app ponent in your source code. If you're using custom _app ponent, you need to check if the ponents have static ponents and trigger that manually. This will be done in custom app ponent itself.

If you're not using it, then you won't face any issue.

You can follow this approach I used for getInitialProps in my custom _app here

I ran into the same problem. But my problem was not the custom App ponent but a bination of…

1. my getStaticPaths was missing the path I was testing for
2. getStaticPaths returned fallback: true

With these two things together my nextjs app first built the pages on server side, but as my current path was not in the pages to be generated the fallback was kicking in, and this is AFAIK running on client side: My page ponent got parameters with undefined first, then getStaticProps was called, and my page ponent got run again, this time the parameters were filled in.

Two possible solutions:

1. allow this to happen and handle it in the page ponent: if (typeof myParam === "undefined") return "Loading..."
2. make sure all paths are returned by getStaticPaths and remove the fallback: true. If you load an unknown path then you'll see a 404 page