Next.js getInitialProps compatibility

Subject of the issue

I thought that after #379, this would be possible in Next.js:

const BlogPost = () => {};

BlogPost.getInitialProps = async () => {
  const data = await fetch();
  return data;
};

import BlogPost from '../../components/BlogPost';

export default BlogPost;

Unfortunately, the getInitialProps method is never called, as the BlogPost is not the most top-level component that is exported:

export default ({components, ...props}) => <MDXTag name="wrapper" Layout={({ children }) => <BlogPost meta={meta}>{children}</BlogPost>} layoutProps={props} components={components}>

Is there any way to make it possible to run a getInitialProps function from my BlogPost? I’m not sure what the right approach here is, as obviously the MDXTag component needs to be wrapped around the BlogPost children… Maybe a patch in Next.js could make this possible? Not sure.

/cc @timneutkens

[jescalan]

I have implemented a fix for this, but it definitely is not ideal when it comes to user-friendliness. It is fairly simple though, a couple lines in a custom _app.js file.

import App, { Container } from 'next/app'

class NextApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    } else if (Component.isMDXComponent) {
      pageProps = await Component({}).props.originalType.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render() {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default NextApp

This will ensure that getInitialProps on your mdx layout is run and passed through the containing elements.

[EarthlingDavey]

I’m following this issue. The answer should fix the compatibility issue when using next-mdx-enhanced with next-i18next.

You have not declared a namespacesRequired array on your page-level component: MDXContent.