Sub pages? (for rendering partials and child routes)

[mmmeff]

Is there currently any way to render partials? For example, how would one go about adding a component to the application without having to tack it onto each and every file in the pages directory?

[nodegin]

try to create a components folder and place your items inside

[nkzawa]

related: #50

[dlindenkreuz]

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

[mmmeff]

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

[dlindenkreuz]

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

[mmmeff]

@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

[rauchg]

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)

[krazyjakee]

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

[kafkahw]

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