Layouts in Next.js
There may be many approaches to handling layouts in Nextjs but mine is as easy as can be, and I can explain why. Nextjs is the React framework for production (http://nextjs.org). It is a remarkable framework for developing applications with React as it comes preconfigured with a lot of must-have features that would otherwise be a pain to configure every time. This is the beauty of building applications with Nextjs.
As a professional front-end developer, it is a good practice to split your large files into smaller units and one way you could do that is by defining your layouts that would be used across your pages, then wrapping your page components with the layouts (thereby isolating some layout-centric logic) and then in those page components, a mix of the smaller components units (e.g Buttons). Which is not a bad idea at all but the approach Nextjs ships out with out of the box starts with the page component files skipping the layouts. What if you still wanted to use layouts? This article would show you an easy way to go by it.
From the code sandbox above let us break down the implementation. You might want to open this code sandbox in another tab to easily read the following section.
- layouts/(admin,default).js: We implement our layout components in these files but for this example, they are just wrappers having a side-nav (for the admin) and top-nav (for the default). You can extend them to have their own logic but for now, we are only using UI to differentiate the layouts
- pages/(index, admin,contact-us).js: In all the page components we just add the information of the chosen layout in string format so that it would be added to the render function output. This is what we would use in our Layout High Order Component.
- pages/_app.js: In this file, we just wrapped the entry component with our Layout Component (this would be explained later). And then passed both the pageProps value produced by Nextjs to both the Layout Component and the Entry Component. This is so that we can have all the data we need to implement any layout-centric logic and our layout High Order Component and also still have that data available in your Entry Component so as not to break the natural flow of Nextjs.
- layouts/layout-wrapper.js: In this file, is the High Order Component the Heart of this functionality. First, we import the admin and default layouts and assign them to the matching string values used in the page components in an object (you can have this object in a separate file to serve as an Enum) (Lines 1–7). Second, at Line 11 in the main layout component function, we access the layout string in the child component using props.children.type.layout (this is where React/Nuxtjs puts the value after the compilation of the render function. Feel free to explore other values for your own curiosity) then we use the value to pick the select the equivalent layout component in our layouts object above. Finally, from Lines 13–18, we do a simple checker to prevent any errors if the layout is not found the default layout is returned and if found we return the corresponding layout and in both cases, we pass in the props so that it is available in our layout component files.
And that's it. Feel free to mess around with the code to see just how it works. I am sure that you would realize how easy it is. This can serve as a solution for layouts at least until the Nextjs team implements the functionality natively. Happy Coding.