getServerSideProps in _app.tsx

[ravirajawasthi]

import { AppProps } from 'next/app';
import 'bootstrap/dist/css/bootstrap.min.css';
import { GetServerSideProps } from 'next';

const AppComponent = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log(Object.keys(context)+ ' app.tsx');
  return { props: {} };
};


export default AppComponent;

Why does this console.log not run?

[rafaelalmeidatk]

The custom App only has getInitialProps at the moment, be aware that adding this method will opt-out the entire app from Automatic Static Optimization

[ravirajawasthi]

Are there different arguments passed to getInitialProps when used in _app than when used with normal pages?
How to use typescript then?

[rafaelalmeidatk]

Yep, this is the object passed to getInitialProps of _app: https://github.com/zeit/next.js/blob/57535b5afc3782728822576603fd48ea5539941b/packages/next/next-server/lib/utils.ts#L124-L129

And this is the object passed to getInitialProps of pages: https://github.com/zeit/next.js/blob/57535b5afc3782728822576603fd48ea5539941b/packages/next/next-server/lib/utils.ts#L93-L122

But if you are doing data-fetching in pages, it is better to use getStaticProps or getServerSideProps.

[rafaelalmeidatk]

Check this docs page to type the custom App: https://nextjs.org/docs/basic-features/typescript#custom-app