Comments (9)
@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.
Related Issues (20)
- Relative <img> 404s when using next/link and trailingSlash in Safari HOT 4
- Triggering notFound in generateMetadata results in Unhandled Runtime Error Error: NEXT_NOT_FOUND
- File name too long (os error 63) since > 14.2 HOT 2
- Docs: Pages and layouts section not opening HOT 5
- Page won't rerender when initial searchparam is removed HOT 1
- Typescript type for router.query is incorrect since it can be undefined (on first render in frontend) HOT 1
- Typescript type for router.query is incorrect since it can be undefined (on first render in frontend) HOT 1
- Routes are broken when the page extension contains only 'tsx'. HOT 2
- Docs: Allow https://nextjs.org/ to work when PerformanceObserver is undefined
- v14.2.x gives warning for `Invalid page configuration` for `middleware.ts` HOT 2
- Dependencies with `exports` field break on pages router with `esmExternals: false` HOT 1
- Intercepted page in dynamic route with route groups gets called when linked from another segment
- Rewritten paths cause a client side redirect unexpectedly when set up with basePath: false and an active basePath
- SWC does not catch nested `styled-jsx` tags in props HOT 2
- SWC panicks when processing nested `styled-jsx` tags HOT 1
- Code with a worker fails to build under the edge runtime, even if it's dead code.
- Runtime error in my local machine in rendering current time HOT 4
- Cdn problem with App Router HOT 1
- Values ββsent by headers in the middleware are not accepting letters with accents HOT 1
- Docker image ignores signals HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.