question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getInitialProps only run once when _app.js is provided in react hooks scenario.

See original GitHub issue

Bug report

getInitialProps only run once when _app.js is provided in react hooks scenario.

Describe the bug

Assuming we have two files in Pages directory, _app.js and index.js. Both of them are calling getInitialProps, but only the one in _app.js ran successfully.

// _app.js
import React, { memo } from 'react';
import { Container } from 'next/app';
const Index = memo(({ Component, router }) => {
  return (
    <Container>
      <Component router={router} />
    </Container>
  );
});
Index.getInitialProps = async props => {
  console.log(1);
  return {};
};
export default Index;

// index.js
import React, { memo } from 'react';
const Index = memo(props => {
  return <div>index</div>;
});
Index.getInitialProps = async props => {
  console.log(2);
  return {};
};
export default Index;

Only ```1``` logged in the terminal.

To Reproduce

test repo: https://github.com/edwardfhsiao/nextjs-test-ropo

  1. git clone https://github.com/edwardfhsiao/nextjs-test-ropo
  2. cd nextjs-test-ropo
  3. npm i
  4. npm run dev

Expected behavior

Should also log 2 in the terminal.

Screenshots

If applicable, add screenshots to help explain your problem. image

System information

  • OS: macOS Mojave
  • Browser (if applies) Chrome
  • Version of Next.js: 8.1.0 react: 16.8.6

Additional context

Only happened in react hooks scenario

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Timercommented, Jun 28, 2019

Please see the documentation about a custom app. You must invoke getInitialProps yourself.

0reactions
balazsorban44commented, Jan 30, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - _app.getInitialProps is not called on every request
For pages that use getServerSideProps , the _app 's getInitialProps function gets called on every request and will always run on the server....
Read more >
Data fetching in React and Next.js with useSWR to impress ...
This function has a tricky behavior. As per Next.js documentation: For the initial page load, getInitialProps will run on the server only.
Read more >
@maa/monkey - npm
Shallow routing allows you to change the URL without running getInitialProps . You'll receive the updated pathname and the query via the router ......
Read more >
React.js / Next.js and Vue.js / Nuxt.js Syntax Comparison Side ...
But if you have to switch between those to frameworks frequently. You might easily forget the syntax in another framework after diving into...
Read more >
How to solve Next.js window is not defined
Next.js is capable of rendering React on the client, just as before, and rendering React on the server. Even if you don't explicitly...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found