Top-level app component and animated route transitions

[dlindenkreuz]

Having animated route transitions would be nice, as this is one of the many benefits through client-side routing. Doing so should be left up to the user in my opinion (some people prefer CSS transitions over more fine-grained control with react-motion etc). As I understand it, one would need to modify the top-level App component.

The client entry file seems to look for a globally assigned __NEXT_DATA__.app variable but I can't find any documentation on that.

[luisrudge]

as commented in #104, I think a good solution would be supporting a _layout.js file like the _error.js.

[dlindenkreuz]

@luisrudge to me, this also seems to be the most coherent way.

[sedubois]

Is this duplicate of #50?

[dlindenkreuz]

This issue aims for a single modifiable root component whereas in #50, the complex strategy of having multiple roots is discussed. With the latter, route transition animations could be hard or at least different to implement.

I would answer your question with no, but feel free to comment if merging the issues would make sense.

[sedubois]

Thanks, indeed having an external template file sounds simpler than multiple roots. It might help to reword the issue to speak in broader terms of a shared template which doesn't reload? (to keep header, footer, CSS with transitions, Redux Provider, ApolloProvider, etc)

I would also not call such a file _layout, because as mentioned above it could help with other things than visual layout (such as maintaining global state).

[richardnias]

I think this would be good. It's already fairly easy to implement I think - see my example of a simple PageFactory component, which is just a higher order component that I wrap my pages in (example). (note this example isn't complete, as ideally PageFactory would implement getInitialProps which would call the equivalent method of the child component).

It would definitely be better to have an optional component that wraps pages automatically, to save users reimplementing something like PageFactory and having to remember to wrap each page.

[eirikurn]

How about allowing each folder in pages/ to have a _layout.jsx module. This module exports a layout component for pages in that folder. Nested folders could have nested layout components, a la react-router. The life cycle of these layout component would work like in react router, so they could maintain state across page loads and perform page transitions.

This method is inspired by gatsby, which uses React Router behind the scenes.. But next could take this method further, supporting getInitialProps at every level, e.g. load navigation, sidebar data.

Another interesting point; this pattern breaks in gatsby when nested layouts don't match urls. But with Programmatic API (#291), it would be easy to work around that.