`next/app` as functional component #7515

dmitrizzle · 2019-06-05T20:07:18Z

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.

The text was updated successfully, but these errors were encountered:

tsaiDavid · 2019-07-25T20:53:31Z

This would be great! Would love to be able to use hooks in _app.tsx!

timneutkens · 2019-09-23T07:51:14Z

@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.

dmitrizzle · 2019-09-23T15:06:42Z

@timneutkens do you mean It'll break withRouter wherever it's being used, or just with _app.js?

timneutkens · 2019-09-23T19:46:57Z

Whenever it's being used. Mostly related to Apollo and it's tree traversing (if you're using Apollo). Hence why we can't get rid of the extending of the original next/app yet.

mikestopcontinues · 2019-10-30T20:51:27Z

@timneutkens Can you expand on the issue? Or point to somewhere it's discussed? Also, what's the plan to move forward?

timneutkens · 2019-10-31T12:15:55Z

@mikestopcontinues it's been solved since my last comment and the latest release of Next.js (9.1.2). I've opened a PR to update the docs.

mikestopcontinues · 2019-10-31T14:32:05Z

Very cool. Thanks!

mvllow · 2019-11-01T00:44:39Z

Side note, it appears dynamic routing does not provide a query to getInitialProps when using this functional app. If this is not a known bug I can open a new issue with more details.

tsujp · 2019-12-11T13:53:55Z

This issue is closed and marked resolved but there were only changes to _app.tsx, where are the changes in documentation and examples for _document.tsx?

Is it this?

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { AppInitialProps } from 'next/app'

const AppDocument = ({ ...initialProps }: Document & AppInitialProps) => {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

export default AppDocument

timneutkens · 2019-12-11T21:07:45Z

Document should be a class extending from next/document as documented. This issue is completely unrelated to _document.

amalv · 2019-12-18T13:09:07Z

I've seen the documentation has been updated in this PR that was merged in October 31, but I can't see it yet in the official documentation

By the way, which should be the types for _app.tsx?

I'm currently using this:

interface MyAppProps {
  Component: React.FC;
  pageProps: any;
}

const MyApp = ({ Component, pageProps }: MyAppProps): JSX.Element => {
  ...
}

Which seems to work fine, but I'm not sure if this is the best approach, particularly regarding pageProps since I'm using a any type.

timneutkens · 2019-12-18T19:18:19Z

@theBashShell as said, extend from next/document, don't do what you posted as I can guarantee it will break 100% in any future update. Hid the comment for that reason.

MacZel · 2019-12-18T22:48:25Z

Which seems to work fine, but I'm not sure if this is the best approach, particularly regarding pageProps since I'm using a any type.

you can easily type it like this:

import { NextPage } from 'next'
import { AppProps } from 'next/app'

const App: NextPage<AppProps> = ({ Component, pageProps }) => {
}

miloofcroton · 2020-02-24T20:15:16Z

you can easily type it like this:

import { NextPage } from 'next'
import { AppProps } from 'next/app'

const App: NextPage<AppProps> = ({ Component, pageProps }) => {
}

I don't think this is right. NextPage is not the right type for _app. The signature for getInitialProps differs. I need Component and ctx off the parameter sent to getInitialProps for _app, whereas other pages (not _app) get just that ctx property itself as the paramter.

I'm leaving it untyped at the moment until I find the right type.

For reference,

this is NextPage:

export type NextPage<P = {}, IP = P> = {
  (props: P): JSX.Element | null
  defaultProps?: Partial<P>
  displayName?: string
  /**
   * Used for initial page load data population. Data returned from `getInitialProps` is serialized when server rendered.
   * Make sure to return plain `Object` without using `Date`, `Map`, `Set`.
   * @param ctx Context of `page`
   */
  getInitialProps?(ctx: NextPageContext): Promise<IP>
}

and the getInitialProps that I need is in here:

declare function appGetInitialProps({ Component, ctx, }: AppContext): Promise<AppInitialProps>;
export default class App<P = {}, CP = {}, S = {}> extends React.Component<P & AppProps<CP>, S> {
    static origGetInitialProps: typeof appGetInitialProps;
    static getInitialProps: typeof appGetInitialProps;
    componentDidCatch(error: Error, _errorInfo: ErrorInfo): void;
    render(): JSX.Element;
}

myeongjae-kim · 2020-04-07T14:19:06Z

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

EBEREGIT · 2020-04-16T14:47:26Z

Seems this is just for typescript only. I am using javascript

myeongjae-kim · 2020-04-17T05:45:08Z

@EBEREGIT

TypeScript is a super set of JavaScript, so just delete types then you can use it for JavaScript.

// import App from 'next/app'

function MyApp({ 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) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

Also, be careful to use getInitialProps(I think you may know, but as a caution). getInitialProps of _app totally disable Static Site Generating and its optimization. Next.js recommends you to use getStaticProps or getServerSideProps instead of getInitialProps.

timneutkens · 2020-04-17T07:45:21Z

The documentation covers _app as a function already: https://nextjs.org/docs/advanced-features/custom-app

Commented out getInitialProps from your examples @myeongjae-kim as in general adding it is a bad default if there's nothing happening in it.

NMinhNguyen · 2020-04-21T12:39:11Z

Don't want to open a separate issue just yet but the OP was also talking about _document.js:

Currently it's not possible as _app.js and _document.js require to extend Next's React classes.

Do we know what's necessary to solve this for _document.js too, without using a wrapper component? Happy to open a dedicated issue if you think it's worthwhile.

kimgiutae · 2020-08-02T20:26:41Z

I'm also interested to have the custom Document as a functional component... Is this possible like the custom app?

will-stone · 2020-08-18T15:27:53Z

@NMinhNguyen I think it's probably worth opening a separate issue for this, as firstly, this issue is closed, and secondly, the title is about next/app and not next/document. Would be nice to see this, so we could use hooks.

todortotev · 2020-10-02T12:06:52Z

me2

timneutkens · 2020-11-20T13:40:28Z

Hid the last comment as it will likely cause your application to crash between upgrades in backwards incompatible ways because it does not follow the documented way of using _document.

Converting _document to a function component has no real benefits currently besides being able to use useContext but there's no context wrapper above _document that you can use with useContext. useState, useEffect, and other hooks will not work as well given that _document is not hydrated client-side.

_document is currently not a function component for backwards compat reasons, we can likely take a similar approach to what we did for _app though by having getInitialProps fall back to the default value.

Created #19355 to track this.

kimgiutae · 2021-08-30T21:19:03Z

Is the solution added in this recent PR? #28515

balazsorban44 · 2022-01-27T13:08:10Z

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.

ijjk added the Type: Feature Request label Jul 15, 2019

Timer modified the milestones: 9.x, 9.0.x Jul 18, 2019

Timer modified the milestones: 9.0.x, backlog Aug 30, 2019

This comment has been minimized.

Sign in to view

timneutkens mentioned this issue Oct 31, 2019

Update _app documentation to reflect no longer needing next/app #9268

Merged

Timer modified the milestones: backlog, 9.1.3 Oct 31, 2019

Timer closed this as completed in #9268 Oct 31, 2019

jaydenseric mentioned this issue Nov 2, 2019

Functional _app.js causes page getInitialProps to not run #9284

Closed

kalbeekatz mentioned this issue Nov 4, 2019

Feature/nextjs#66 kittyguys/hash#67

Merged

This comment has been minimized.

Sign in to view

ruwikmann mentioned this issue Feb 5, 2020

Compiled with errors and the sign in button is disabled. ruwikmann/nextjs-blockstack#2

Open

This comment has been minimized.

Sign in to view

utterances-bot mentioned this issue Nov 12, 2020

blog/2020/04/07/next-js-app-functional-component myeongjae-kim/terrace-utterances#10

Open

timneutkens mentioned this issue Nov 20, 2020

Support pages/_document as a function component #19355

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`next/app` as functional component #7515

`next/app` as functional component #7515

dmitrizzle commented Jun 5, 2019

tsaiDavid commented Jul 25, 2019

This comment has been minimized.

timneutkens commented Sep 23, 2019 •

edited

Loading

dmitrizzle commented Sep 23, 2019

timneutkens commented Sep 23, 2019 •

edited

Loading

mikestopcontinues commented Oct 30, 2019

timneutkens commented Oct 31, 2019

mikestopcontinues commented Oct 31, 2019

mvllow commented Nov 1, 2019

tsujp commented Dec 11, 2019 •

edited

Loading

timneutkens commented Dec 11, 2019

amalv commented Dec 18, 2019 •

edited

Loading

This comment has been minimized.

timneutkens commented Dec 18, 2019 •

edited

Loading

MacZel commented Dec 18, 2019 •

edited

Loading

miloofcroton commented Feb 24, 2020 •

edited

Loading

myeongjae-kim commented Apr 7, 2020 •

edited by timneutkens

Loading

EBEREGIT commented Apr 16, 2020 •

edited by timneutkens

Loading

myeongjae-kim commented Apr 17, 2020 •

edited by timneutkens

Loading

timneutkens commented Apr 17, 2020

This comment has been minimized.

NMinhNguyen commented Apr 21, 2020

kimgiutae commented Aug 2, 2020

will-stone commented Aug 18, 2020

todortotev commented Oct 2, 2020

timneutkens commented Nov 20, 2020

kimgiutae commented Aug 30, 2021

balazsorban44 commented Jan 27, 2022

next/app as functional component #7515

next/app as functional component #7515

Comments

dmitrizzle commented Jun 5, 2019

Feature request

Problem

Solution

Alternative

Additional context

tsaiDavid commented Jul 25, 2019

This comment has been minimized.

timneutkens commented Sep 23, 2019 • edited Loading

dmitrizzle commented Sep 23, 2019

timneutkens commented Sep 23, 2019 • edited Loading

mikestopcontinues commented Oct 30, 2019

timneutkens commented Oct 31, 2019

mikestopcontinues commented Oct 31, 2019

mvllow commented Nov 1, 2019

tsujp commented Dec 11, 2019 • edited Loading

timneutkens commented Dec 11, 2019

amalv commented Dec 18, 2019 • edited Loading

This comment has been minimized.

timneutkens commented Dec 18, 2019 • edited Loading

MacZel commented Dec 18, 2019 • edited Loading

miloofcroton commented Feb 24, 2020 • edited Loading

myeongjae-kim commented Apr 7, 2020 • edited by timneutkens Loading

EBEREGIT commented Apr 16, 2020 • edited by timneutkens Loading

myeongjae-kim commented Apr 17, 2020 • edited by timneutkens Loading

timneutkens commented Apr 17, 2020

This comment has been minimized.

NMinhNguyen commented Apr 21, 2020

kimgiutae commented Aug 2, 2020

will-stone commented Aug 18, 2020

todortotev commented Oct 2, 2020

timneutkens commented Nov 20, 2020

kimgiutae commented Aug 30, 2021

balazsorban44 commented Jan 27, 2022

`next/app` as functional component #7515

`next/app` as functional component #7515

timneutkens commented Sep 23, 2019 •

edited

Loading

timneutkens commented Sep 23, 2019 •

edited

Loading

tsujp commented Dec 11, 2019 •

edited

Loading

amalv commented Dec 18, 2019 •

edited

Loading

timneutkens commented Dec 18, 2019 •

edited

Loading

MacZel commented Dec 18, 2019 •

edited

Loading

miloofcroton commented Feb 24, 2020 •

edited

Loading

myeongjae-kim commented Apr 7, 2020 •

edited by timneutkens

Loading

EBEREGIT commented Apr 16, 2020 •

edited by timneutkens

Loading

myeongjae-kim commented Apr 17, 2020 •

edited by timneutkens

Loading