Expose app.js #4129

timneutkens · 2018-04-09T14:12:04Z

Fixes #88
Fixes #4029

Examples will be added when this PR lands, since this PR involves a lot of changes I didn't want to mess up the diff with unrelated files

Is rendered on both client and server side
Markup can be persisted between page changes
this.state should not be overwritten. Instead create a new component to handle the state (layout example)
Handles calling getInitialProps of the page Component
Implements componentDidCatch on the client side, and renders the error page accordingly. (overriding componentDidCatch example)
The Container implements React Hot Loader when in development mode.
The Container implements scrolling to a hash when using <Link href="/about#example-hash">

To override the default _app.js behaviour you can create a file ./pages/_app.js, where you can extend the App class:

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

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

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

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

arunoda · 2018-04-09T14:17:03Z

lib/app.js

 import { makePublicRouterInstance } from './router'

 export default class App extends Component {
  state = {
    hasError: null
  }

+  static displayName = 'App'
+
+  static async getInitialProps ({ Component, router, ctx }) {


If user didn't override getInitialProps in his/her sub class, is this going to execute?

Yep 👍 (Basically the same as _document.js that also implements getInitialProps

arunoda · 2018-04-09T14:18:47Z

lib/app.js

-    pathname: router.pathname,
-    asPath: router.asPath,
+    get query () {
+      warn(`Warning: 'url.query' is deprecated. https://err.sh/next.js/url-deprecated`)


Shall we make sure we only print this once?

arunoda · 2018-04-09T14:20:00Z

server/build/webpack/utils.js

@@ -17,7 +17,7 @@ export async function getPagePaths (dir, {dev, isServer, pageExtensions}) {

  if (dev) {


We need to add app.js to the comment :)

arunoda · 2018-04-09T14:25:02Z

test/integration/app-document/pages/_document.js

+
+export default class MyDocument extends Document {
+  static getInitialProps ({ renderPage }) {
+    const { html, head, errorHtml, chunks } = renderPage()


Shall we get these from the Document. Like this:

static getInitialProps(info) { const initialProps = Document.getInitialProps(info); return { ...initialProps, customProperty: 'Hello World' } }

Then it's very simple and we don't need expose internal things like renderPage. And let's make sure we update this for _app.js and inside README as well.

arunoda · 2018-04-09T14:25:40Z

Looks pretty nice to me.

corysimmons · 2018-04-09T16:55:06Z

Just confirming this is the PR to watch for page transition support?

timneutkens · 2018-04-09T17:12:28Z

@corysimmons it's a lower level API that could be used to implement a lot of different things.

arunoda · 2018-04-10T00:00:38Z

lib/app.js

    back: () => {
-      warn(`Warning: 'url.back()' is deprecated. Use "window.history.back()"`)
+      warn(`Warning: 'url.back()' is deprecated. Use "window.history.back()" https://err.sh/next.js/url-deprecated`)


Don't we use something like warnOnce or something. And for the rest of the places.

I believe this was deprecated in v2 or v3. That's what I didn't want to touch it too much, just adding the url to the message. In theory we could use the same message though. Will update it.

arunoda · 2018-04-10T00:03:26Z

readme.md

+</details></p>
+
+- Is rendered on both client and server side
+- `this.state` should not be overwritten. Instead create a new component to handle the state ([layout example](./examples/layout-component))


This is not clear. What are we going to say.

Added a clearer example.

arunoda · 2018-04-10T00:11:10Z

readme.md

+- Is rendered on both client and server side
+- `this.state` should not be overwritten. Instead create a new component to handle the state ([layout example](./examples/layout-component))
+- Handles calling `getInitialProps` of the **page** `Component`
+- Implements `componentDidCatch` on the client side, and renders the error page accordingly. ([overriding `componentDidCatch` example](./examples/componentdidcatch))


Let's try not say what've inside app.js. But what the user can do with this. Here's a sample:

Next.js has a App layout which initialize pages in your app. You can override it with pages/_app.js and implement:

Layouts works across pages

Animations in between pages

Keep the DOM state when navigating page

Provide additional properties to initial props of pages

Custom error messages by catching errors
...

arunoda

Added some suggestions for docs.
May contain grammar errors :D

arunoda · 2018-04-10T16:54:20Z

readme.md

+  <ul><li><a href="./examples/componentdidcatch">Using `_app.js` to override `componentDidCatch`</a></li></ul>
+</details></p>
+
+Next.js uses the `App` component to initialize pages. This can be used for:


This convey the message better:

Next.js uses the App component to initialize pages. You can override it and control the page initialization. With that you can do amazing things like:

arunoda · 2018-04-10T16:59:56Z

readme.md

+- Persisting layout between page changes
+- Keeping state when navigating pages
+- Custom error handling using `componentDidCatch`
+- Handling of calling **page** `Component`s `getInitialProps`


This is a good example for getInitialProps:

Inject additional data into pages (like by processing GraphQL queries)

arunoda · 2018-04-10T17:04:20Z

readme.md

+- Custom error handling using `componentDidCatch`
+- Handling of calling **page** `Component`s `getInitialProps`
+
+To override the default `_app.js` behaviour you can create a file `./pages/_app.js`, where you can extend the `App` class:


To override, create a file in ./pages/_app.js and override the App class as shown below:

PetrSnobelt · 2018-04-10T22:52:48Z

Is it possible to have multiple layouts using this feature?
It looks like the only way is to use if statement in _app.js which can be difficult.
Will be fine if a page can specify which app/layout would like to use.

timneutkens · 2018-04-10T23:09:35Z

It looks like the only way is to use if statement in _app.js which can be difficult.

This is definitely not the way to go. Since you'd lose code splitting and other advantaged. What you could do however is this:

@tz5514 made a PR implementing a custom renderPage api. The change he made actually involved only 1 change in the App component. So his idea can be implemented by the community based on this pull request. The specific PR is: #3552

arunoda · 2018-04-10T23:34:50Z

@PetrSnobelt

It looks like the only way is to use if statement in _app.js which can be difficult.

I don't find using if is difficult. Usually, that's the way you can show different content in React apps.
I am not just talking about if, but all the basic JS control structures.

Will be fine if a page can specify which app/layout would like to use.

Yes you can do that. You can mention the layout name in your page like this:

const MyPage = () => (
  <div>This is my page</div>
)

MyPage.layout = "main-layout"

export default MyPage

Then you can read the layout field inside the render function of _app.js and use the correct layout.
You can even use our dynamic import support to avoid loading all the layouts at once.

arunoda

This is looks great.

tz5514 · 2018-04-11T07:25:20Z

@timneutkens There is a missing item Custom <App> in readme.md navigation menu,
beween Dynamic Import and Custom <Document>:

timneutkens · 2018-04-11T07:28:49Z

@tz5514 great catch, I believe the table of contents hasn't been updated for a while, I'll udpate it right now 👍

timneutkens · 2018-04-11T07:32:28Z

Fixed the table of contents ✅

PetrSnobelt · 2018-04-11T07:33:13Z

@timneutkens, @aronuda That makes sense, thanks
I like #3461 idea and hope it can be used with _app.js

timneutkens · 2018-04-11T09:42:55Z

@PetrSnobelt As you can see here: https://github.com/zeit/next.js/pull/3461/files#diff-c39f41208533f29db9e4150b6efd2b68

The change involves changing app.js, so yeah, definitely possible 😄

# Conflicts: # readme.md # server/render.js

pozylon · 2018-04-12T08:04:16Z

Absolutely amazing work @timneutkens. Thank you so much for bringing us this, I can implement about 5 feature requests the way it should be done for various customers after this gets merged.

tz5514 · 2018-04-12T09:13:30Z

Finally! Huge thanks for @timneutkens and core team. Now I can release next-layouts in fews days. Great work, thanks!

willmeierart · 2018-04-14T18:28:00Z

So, will we have to wait for 6 to use this feature? Thank you soooo much for opening this door for us!

timneutkens · 2018-04-15T08:37:12Z

It'll be out on canary when another PR I'm working on right now gets merged (will be opened on the repository today 👍

tim-phillips · 2018-04-18T23:40:54Z

6.0.0-canary.4 is released

timneutkens added 4 commits April 9, 2018 10:32

Expose pages/_app.js

e24d861

Add tests for _app and _document

d01623f

Uncomment deprecation warnings

6eb23be

Add documentation for _app, improve documentation of _document

7c9a422

This was referenced Apr 9, 2018

Allow pages to be render functions (allows persistent layout with no magic) #3461

Closed

Add persistent layout support #3288

Closed

renderPage API for top-level component rendering & layout feature implementation #3552

Closed

arunoda reviewed Apr 9, 2018

View reviewed changes

timneutkens added 3 commits April 9, 2018 17:51

Update docs / test for _document

407f067

Add _document to client compiler in development

1ac18ca

Add missing app.js to comment

8c1d25c

Only warn once

a87e37f

timneutkens added 2 commits April 9, 2018 19:27

Add url-deprecated error page

ffcc795

Combine tests

97ca475

arunoda reviewed Apr 10, 2018

View reviewed changes

timneutkens added 2 commits April 10, 2018 11:50

Yse same message for all methods of ‘props.url’

3bec435

Update docs around _app

1e7cde8

arunoda reviewed Apr 10, 2018

View reviewed changes

timneutkens added 2 commits April 10, 2018 19:28

Update documentation

3ac230a

Quotes

b7bbee2

arunoda approved these changes Apr 10, 2018

View reviewed changes

Update table of contents

f126dfb

rauchg approved these changes Apr 11, 2018

View reviewed changes

manovotny mentioned this pull request Apr 12, 2018

Styled Components fail to SSR on first render #3796

Closed

1 task

Merge branch 'canary' of github.com:zeit/next.js into add/layout

30089b7

# Conflicts: # readme.md # server/render.js

timneutkens merged commit eca8e8f into vercel:canary Apr 12, 2018

timneutkens deleted the add/layout branch April 12, 2018 08:33

tlenclos mentioned this pull request Apr 24, 2018

Integration with custom App component kirill-konshin/next-redux-wrapper#80

Closed

kirill-konshin mentioned this pull request Apr 25, 2018

Support _app approach for upgraded Redux Wrapper #4207

Merged

lock bot locked as resolved and limited conversation to collaborators Apr 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expose app.js #4129

Expose app.js #4129

timneutkens commented Apr 9, 2018 •

edited

arunoda Apr 9, 2018

timneutkens Apr 9, 2018

arunoda Apr 9, 2018

timneutkens Apr 9, 2018

arunoda Apr 9, 2018

timneutkens Apr 9, 2018

arunoda Apr 9, 2018 •

edited

arunoda commented Apr 9, 2018

corysimmons commented Apr 9, 2018

timneutkens commented Apr 9, 2018 •

edited

arunoda Apr 10, 2018 •

edited

timneutkens Apr 10, 2018

arunoda Apr 10, 2018

timneutkens Apr 10, 2018

arunoda Apr 10, 2018

timneutkens Apr 10, 2018

arunoda left a comment

arunoda Apr 10, 2018

arunoda Apr 10, 2018

arunoda Apr 10, 2018

PetrSnobelt commented Apr 10, 2018

timneutkens commented Apr 10, 2018 •

edited

arunoda commented Apr 10, 2018 •

edited

arunoda left a comment

tz5514 commented Apr 11, 2018 •

edited

timneutkens commented Apr 11, 2018

timneutkens commented Apr 11, 2018

PetrSnobelt commented Apr 11, 2018 •

edited

timneutkens commented Apr 11, 2018

pozylon commented Apr 12, 2018

tz5514 commented Apr 12, 2018

willmeierart commented Apr 14, 2018

timneutkens commented Apr 15, 2018 •

edited

tim-phillips commented Apr 18, 2018

		@@ -17,7 +17,7 @@ export async function getPagePaths (dir, {dev, isServer, pageExtensions}) {

		if (dev) {

Expose app.js #4129

Expose app.js #4129

Conversation

timneutkens commented Apr 9, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda Apr 9, 2018 • edited

Choose a reason for hiding this comment

arunoda commented Apr 9, 2018

corysimmons commented Apr 9, 2018

timneutkens commented Apr 9, 2018 • edited

arunoda Apr 10, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PetrSnobelt commented Apr 10, 2018

timneutkens commented Apr 10, 2018 • edited

arunoda commented Apr 10, 2018 • edited

arunoda left a comment

Choose a reason for hiding this comment

tz5514 commented Apr 11, 2018 • edited

timneutkens commented Apr 11, 2018

timneutkens commented Apr 11, 2018

PetrSnobelt commented Apr 11, 2018 • edited

timneutkens commented Apr 11, 2018

pozylon commented Apr 12, 2018

tz5514 commented Apr 12, 2018

willmeierart commented Apr 14, 2018

timneutkens commented Apr 15, 2018 • edited

tim-phillips commented Apr 18, 2018

timneutkens commented Apr 9, 2018 •

edited

arunoda Apr 9, 2018 •

edited

timneutkens commented Apr 9, 2018 •

edited

arunoda Apr 10, 2018 •

edited

timneutkens commented Apr 10, 2018 •

edited

arunoda commented Apr 10, 2018 •

edited

tz5514 commented Apr 11, 2018 •

edited

PetrSnobelt commented Apr 11, 2018 •

edited

timneutkens commented Apr 15, 2018 •

edited