Sub pages? (for rendering partials and child routes) about next.js HOT 9 CLOSED

@dlindenkreuz Yup! A top-level component would solve many issues at once with Next - it seems to be a fairly severe limitation in the framework at the moment, of which the impact is only marginally mitigated by the inclusion of next/head

from next.js.

@rauchg this can't be solved if the layout is is remounted with every navigation right? That can't be an acceptable solution to this problem.

Unless I'm missing something. How can the layouts ensure only the child components are remounted, keeping the layout intact?

from next.js.

@krazyjakee here's my guess.
The reconciliation process in react will handle it. It detects the difference between two react trees and if the component is the same it'll skip remounting or re-rendering if there's no props/state changes. That way if all routes are using the same top-level component, there won't be a top-level remount if you switch routes.

from next.js.

try to create a components folder and place your items inside

from next.js.

related: #50

from next.js.

@mmmeff Reusable components that are not relevant to the router can reside outside the pages directory. Check out the examples [1] [2].

from next.js.

@dlindenkreuz @nodegin I believe you may have misinterpreted my question.

What I'm asking for is not how to split components out, but rather how I can avoid adding the same components to every single page if they are shared layout elements, such as a page's navigation bar, footer, etc.

I've implemented the following example of a workaround I have for now and pushed it here: https://github.com/mmmeff/nextjs-page-template-example

It also shows how you can apply a CSS reset across your entire application without needing to require('glamor/reset') on every page.

from next.js.

@mmmeff Point taken! I'm currently discussing this with @ericf in issue #50 and suggested a modifiable top-level App component in #88. This would also solve your problem, right?

from next.js.

For reference to those who find this issue:

• Top level components are solved by wrapping in HOC (see layout examples inside ./examples)
• For SSR output, you can now supply a custom <Document /> (see README)

from next.js.