`next/app` as functional component

Feature request

Problem

Functional components yield a more performant and readable code. It’s been hinted by React team that class’es may be split into a separate package in the near future. It would be nice for Next.js to provide a way to create apps without classes. Currently it’s not possible as _app.js and _document.js require to extend Next’s React classes.

Solution

If Next’s controlling components can be rewritten with React Hooks, the entire Next app should consist of functional components by default. Perhaps we could have a version that uses that style as an opt-in for backwards compatibility.

Alternative

I am considering rewriting the above-mentioned components in my project folder, but I fear that it may cause some issues.

Additional context

This is pretty much it.

[myeongjae-kim]

Here is the perfect _app type.

// import App from "next/app";
import { NextComponentType } from "next"
import { AppContext, AppInitialProps, AppProps } from "next/app";

const MyApp: NextComponentType<AppContext, AppInitialProps, AppProps> = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.

// MyApp.getInitialProps = async (appContext) => {
//   const appProps = await App.getInitialProps(appContext)
//   return { ...appProps }
// }

export default MyApp;

https://github.com/myeongjae-kim/next-js-with-typescript-valid-app-type

[timneutkens]

@medmin please don’t spam issues.

You can already use hooks in _app.js by doing:

import React from 'react'
import App from 'next/app'

function MyComponent({children}) {
  // You can use hooks here
  return <>{children}</> // The fragment is just illustrational
}

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  render() {
    const { Component, pageProps } = this.props
    return <MyComponent>
      <Component {...pageProps} />
    </MyComponent>
  }
}

export default MyApp

We’ve already made changes to Next.js to allow the exported component itself to be a functional component. However this would break withRouter as that still uses legacy context for backwards compat reasons.