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)
- "Could not open page.js in the editor" error on VSCode Windows
- Docs: Minor syntax error in the streaming doc HOT 3
- Nextjs pages router doesn't update UI when using history replace HOT 2
- [turbopack] [next/og] monorepo fails to resolve workspace node_modules in root node_modules HOT 2
- create-next-app not working on newest version (14.2.3) with bun HOT 1
- Cannot create reproduction
- NextJS server is intercepting POST requests that _should_ be handled by rewrites, and treating them as GET
- optimizePackageImports' caches index.ts files (dev and build) when they resolve to source files outside node_modules.
- Missing shared workspace dependencies when using standalone output with pnpm
- assetPrefix with same name of route with catch-all segments won't work since 14.2 (Using Page Router)
- Missing Ecmascript features in webpack HOT 1
- allow importing "server-only" modules in `next.config.js`
- Broken react strict mode behavior on first render
- nextjs build hangs with antd form at generating static pages step HOT 1
- Docs: NextRequest and NextResponse are being displayed in the `Pages` router docs HOT 1
- Build creating multiple classes with the same name HOT 6
- App router global styles (`import 'style.css'`) don't get removed when navigating to a different page
- TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable While using the example it the docs for useActionState. HOT 11
- unhandledRejection: Error: Cannot find module 'lru-cache' HOT 4
- Docker standalone is missing sharp 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.