Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Next JS - getStaticProps not returning anything

I'm using Next.js with context API and styled components and I can't seem to get getStaticProps working.

I have read other posts and often they talk about the custom _app which I do have but I never ran into the issue before using context API. I have also tried the getInitialProps function and to no avail. I should also note that even after not including the context wrapper I don't get a response from a function so I'm not at all sure of where to look.

Here is my code. Can you see what's going on?

import React from 'react';
import fetch from 'node-fetch';

export default function Header(props) {
  console.log(props.hi);
  return <div>Hey dis header</div>;
}

export async function getStaticProps(context) {
  return {
    props: {
      hi: 'hello',
    },
  };
}

I have tried logging from the function but nothing is logging so I would imagine the problem is that the function isn't running for whatever reason.

Heres my custom _app file

import { GlobalContextWrapper } from 'context';
import Header from 'components/header/Header';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header />
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default MyApp;

Here is my context file

import { useReducer } from 'react';
import initialState from './intialState';
import reducer from './reducer';
import GlobalStyle from '../GlobalStyle';
import theme from '../theme';
import { ThemeProvider } from 'styled-components';

export const GlobalContext = React.createContext();

export function GlobalContextWrapper({ children }) {
  const [globalState, dispatch] = useReducer(reducer, initialState);
  return (
    <GlobalContext.Provider value={{ globalState, dispatch }}>
      <GlobalStyle />
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </GlobalContext.Provider>
  );
}
like image 348
testingtestinganyone Avatar asked Sep 24 '20 21:09

testingtestinganyone


People also ask

What does getStaticProps return?

Whenever the page client loads the page, code inside getStaticProps executed first and, then it returns the object to the main page component. Remember, getStaticProps always return the object and, it executes before the page component.

What is getStaticProps in next JS?

getStaticProps: It's an async function that we export from the page component, used to generate data on the build time. It fetches the data and generates the HTML pages on our server and it caches it.

When should I use getStaticProps?

You should use getStaticProps if: The data required to render the page is available at build time ahead of a user's request. The data comes from a headless CMS. The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.

How do I use getInitialProps in next JS?

Make sure the returned object from getInitialProps is a plain Object and not using Date , Map or Set . For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router .

How do I use getstaticprops with next?

When a page with getStaticProps is pre-rendered at build time, in addition to the page HTML file, Next.js generates a JSON file holding the result of running getStaticProps. This JSON file will be used in client-side routing through next/link or next/router.

What is the getstaticprops API reference?

The getStaticProps API reference covers all parameters and props that can be used with getStaticProps. As getStaticProps runs only on the server-side, it will never run on the client-side. It won’t even be included in the JS bundle for the browser, so you can write direct database queries without them being sent to browsers.

How does getstaticprops work with incremental static regeneration?

When combined with Incremental Static Regeneration, getStaticProps will run in the background while the stale page is being revalidated, and the fresh page served to the browser. getStaticProps does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML.

What is the difference between unstable_revalidate and getstaticprops?

getStaticProps runs in the background when using revalidate getStaticProps runs on-demand in the background when using unstable_revalidate When combined with Incremental Static Regeneration, getStaticProps will run in the background while the stale page is being revalidated, and the fresh page served to the browser.


2 Answers

The issue was that i was not exporting this function from a page but instead a component and a custom app file.

Does anyone know a way i can get around this? The problem is that i have a header that gets data from a response and i want this header to be shown on every page without having to manually add it to each page along with repeating the getStaticProps function

like image 140
testingtestinganyone Avatar answered Oct 13 '22 04:10

testingtestinganyone


A solution based on your code is just getting data in your _app.js - getInitialProps and pass to the Header

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header data={pageProps.header}/>
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);


  const headerData = ....

  return { ...appProps, header: headerData };
};
like image 44
nghiaht Avatar answered Oct 13 '22 05:10

nghiaht